How to extract the system fonts and implement as a dropdown to change the font of the text on web page?

Question

I am new to Vue js. Is there a way to extract the system fonts (the one you can find in "C:\Windows\Fonts") as a list/array of font-family? And how can I use this list as a dropdown in Vue js where the user clicks to change the font of the text on the web page?

Answer 1

You don't have access to the system fonts directory from the web page obviously for security reasons, but you could use a nifty trick to test if a particular font is available

Detect whether a particular font is installed

and then implement this dropdown menu solution

How can I make a dropdown menu for font families using vue js?

checking which fonts are found when the component is 'mounted'

new Vue({
   el: '#app',
   data: {
      focused_font:'',
      available_fonts: ["Pacifico", "Dancing Script", "Shadows Into Light", "Lobster", "Anton", "Indie Flower", "Charmonman", "Kodchasan", "Notable", "Mali", "Srisakdi", "Slabo"]
   },
   mounted: function () {
      for (let a = 0; a < this.available_fonts.length; a++) {
         if (!isFontAvailable(this.available_fonts[a])) {
            this.available_fonts.splice(a, 1);
            a--;
         }
      }
   }
});