Home/ Questions/Q 7816435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T05:52:07+00:00

I want to create a drop-down menu in which we can see all the

  • 0

I want to create a drop-down menu in which we can see all the available fonts and we can select any font of our choice. Also I want to create a font-color selection widget. There exists a large no of font-styles. I want to know how do i get all these fonts and how to create a widget using which user can select the color of his choice.

For creating font-selection drop-down menu, I have used list and for demo purpose, i added 3-4 font names and displaying them. Its working fine.
Google gave me the list of all font-names but writing down in html code isn’t a good approach i think.
I guess there should exist a js library for doing all this. Is there ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Jukka K. Korpela is right, but regarding your question:

    This should get you started on the selecting font family:

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 id="liveh1">Some text</h1>
  <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
    <option> Serif </option>
    <option> Arial </option>
    <option> Sans-Serif </option>                                  
    <option> Tahoma </option>
    <option> Verdana </option>
    <option> Lucida Sans Unicode </option>                               
  </select>
    <script>
      function updateh1family() {
        var selector = document.getElementById('selecth1FontFamily');
        var family = selector.options[selector.selectedIndex].value;
        var h1 = document.getElementById('liveh1')
        h1.style.fontFamily = family;        
      }

    </script>
</body>
</html>

    If it’s important to see if the fonts are installed you can use this to tool to check.
    And if it’s ok to use flash you may use something like font-detect-js (they also have a demo but I didn’t manage to get it to work in chrome).

    And for color selector I would recomend using : jscolor

    Hope it helps, and good luck!

    • 0