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

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--;
         }
      }
   }
});