1

Ha possibilidade em javascript ou outra linguagem de listar as fontes instaladas no sistema ou dentro de um diretorio e colocar no 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>

4
  • Você não tem controle dessas fonts no seu css ou dir? Commented 2/09/2021 às 17:49
  • nao, o intuito e so pegar as fontes mesmo do sistema Commented 2/09/2021 às 17:57
  • esse sistema é feito em com qual framework? Commented 2/09/2021 às 17:58
  • 1
    Dá uma olhada nessa resposta do SOen. Tem outras respostas na mesma pergunta, mas das que li, essa parecia o melhor caminho. @edit: entendi a pergunta errada, a resposta que mencionei não verifica um diretório, mas sim as fontes do sistema. Commented 2/09/2021 às 18:01

1 Resposta 1

2

Existe o navigator.fonts, que só é suportado pelos navegadores baseados em Chromium e também precisa ser habilitado pelo endereço chrome://flags/#font-access (desde o Chrome 87)

E também existe o document.fonts.check() e funciona nos seguintes navegadores:

Chrome Edge Firefox Opera Safari WebView Android Chrome Android Firefox Android Opera Android Safari iOS Samsung Internet
35 79 41 22 10 4.4.3 35 41 22 10 3.0+

Usando o navigator.fonts

Em resumo ao usar isso o usuário vai dizer quais ele permite o seu site acessar, lembre-se que isso não pode ser iniciado automaticamente, só por ação do usuário, por exemplo detectando via onclick, se tentar com onload vai causar o erro:

DOMException: User activation is required.

Um exemplo bem simples:

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

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

async function fontes() {
    if ('fonts' in navigator) {
        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.error(ee);
        }
    } else {
        console.error('Seu navegador não tem suporte a navigator.fonts');
    }
}
</script>

Após executar será mostrado isso ao usuário para ele confirmar quais ele permite (afinal as fontes "são" do usuário):

permitir fontes

Nota 1: Ao invés de await também pode usar Promise.then()/Promise.catch(), mas vai depender de suas necessidades.

Nota 2: foi usado if ('fonts' in navigator) { para fazer uma checagem do recurso no navegador atual.


Usando o document.fonts.check()

O uso do document.fonts.check() irá checar um fonte por vez, assim:

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

Então nesse caso não vai obter todas fontes, você terá que enumerar as fontes que deseja testar (adicionar ao seu select talvez), exemplo:

Exemplo para testar com array:

if ('fonts' in document) {
    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++) {
        const font = fonts[i];
        const valid = document.fonts.check(`12px ${font}`);

        console.log(font, valid);
      }
    });
} else {
    console.error('Seu navegador não suporta navigator.fonts');
}

No Firefox infelizmente existe um bug, que toda fonte (mesmo que não exista) retorna true nesse método, aparentemente isso foi reportado no bugzilla:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .