List system or directory fonts for a dropdown

Question

There is a possibility in javascript or other language to list the fonts installed on the system or inside a directory and drop down?

   function changeFont(font){
        document.getElementById("preview").style.fontFamily = font.value;
    }

<select id="input-font" class="input"  onchange="changeFont (this);">
            <option value="Arial">Arial</option>
            <option value="Sans Serif" selected>Sans Serif</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Verdana">Verdana</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Impact">Impact</option>
            <option value="Bookman">Bookman</option>
            <option value="Garamond">Garamond</option>
            <option value="Palatino">Palatino</option>
            <option value="Georgia">Georgia</option>
    </select>
    <br>
    <div id="preview" style="margin:auto;width:50%;height:40px;font-size:32px;text-align:center;background-color:black;color:#fff;">Seu 
        Texto</div>

Answer 1

Except what the @Rafaeltavares commented, there is the API (not enabled by default) that only works in Chrome (you need to enable in chrome://flags/#font-access (since the Chrome 87)

In summary when using this the user will tell which one it allows your site to access, remember that this can not be started automatically, only by action of the user, for example detecting via onclick, try to onload will cause the error:

Domexception: User Activation is required.

A very simple example:

<button id="carregar-fonts">Carregar fontes</button>

<script>
document.getElementById('carregar-fonts').onclick = fontes;

async function fontes() {
    try {
        const fonts = await navigator.fonts.query();

        for (let i = 0, j = fonts.length; i < j; i++) {
            console.log(fonts[i].fullName);
        }
    } catch (ee) {
        console.log(ee);
    }
}
</script>

Instead of await can also use then()/catch(), but it will depend on your needs

After running it will be shown this to the user to confirm which ones it allows (after all the sources "are" of the user):

More details on https://web.dev/local-fonts/

Of course you can use FontFaceSet.check(), just so you know, this is EXPERIMENTAL despite having a reasonable support

Example to test fonts and enumerate (add to your select maybe):

document.fonts.check("10px Arial");

Example to test with array:

const fonts = [
    'Arial',
    'Sans Serif',
    'Comic Sans MS',
    'Times New Roman',
    'Courier New',
    'Verdana',
    'Trebuchet MS',
    'Arial Black',
    'Impact',
    'Bookman',
    'Garamond',
    'Palatino',
    'Georgia',
];

document.fonts.ready.then(() => {
  for (let i = 0, j = fonts.length; i < j; i++) {
    console.log(fonts[i], document.fonts.check(`12px ${fonts[i]}`));
  }
});

The document.fonts.ready is used to check when fonts are loaded into the document, as this of course will not get the local fonts, it will only test the supported fonts (even if it is a Webfont).

Just to be on Firefox and Chrome the results are different, I can’t say why Firefox emits true for everyone, maybe it’s a bug, but I didn’t find anything in bugreport, I update the answer (or if it’s an error in the code).