Pré-visualização de fontes

A maioria das pré-visualizações de fontes na web mostra sempre a mesma lista curta de fontes «seguras para a web» — uma lista que você já conhece e que não diz nada sobre as fontes realmente instaladas na sua máquina. Esta página faz o caminho inverso e parte do seu próprio sistema.

Há três formas de colocar uma fonte aqui. As famílias genéricas (system-ui, sans-serif, serif, monospace) funcionam em qualquer navegador. «Ler fontes locais» enumera, pela Local Font Access API do navegador, todas as fontes instaladas neste dispositivo e as coloca no seletor — elas aparecem na hora, porque os contornos já estão na sua máquina e nada é baixado. Ou envie um arquivo de fonte (TTF, OTF, WOFF ou WOFF2) e a página o registra para esta sessão, assim você pode conferir uma tipografia de marca licenciada sem instalá-la.

Escolha uma fonte, digite o seu texto e ajuste tamanho, peso, estilo, espaçamento, altura da linha, cores e alinhamento. A linha do conjunto de caracteres mostra como números e pontuação se comportam, e o bloco CSS está pronto para copiar — com o esqueleto @font-face incluído quando a fonte ativa veio de um arquivo enviado.

Nem o seu texto nem os seus arquivos saem do navegador.

Duas APIs do navegador sem relação entre si trabalham aqui, e seus comportamentos são bem diferentes.

A enumeração das fontes instaladas usa a Local Font Access API: window.queryLocalFonts() devolve um registro por corte instalado, com família, nome completo, nome PostScript e estilo. A página agrupa esses registros por família, ordena e entrega ao seletor. Para renderizar não é preciso baixar nada: o nome da família vai direto para o CSS e os contornos são fornecidos pelo sistema operacional, exatamente como na sua própria folha de estilo. O Chromium oferece a API após uma permissão única; Safari e Firefox não a implementam, por isso a entrada é ocultada ali em vez de ser deixada para falhar.

O envio usa a Font Loading API: o arquivo é lido em um ArrayBuffer, entregue a new FontFace(family, buffer), carregado e adicionado a document.fonts. A partir daí a fonte se comporta como qualquer outra família e pode ser referenciada pelo nome no CSS.

• queryLocalFonts() exige um contexto seguro (HTTPS ou localhost) e rejeita com NotAllowedError se o diálogo de permissão for descartado; o painel informa os dois casos em vez de lançar uma exceção.
• Uma mesma família pode aparecer em vários estilos. A lista é deduplicada pelo nome da família, então cada tipografia aparece uma vez e o controle de estilo escolhe o corte.
• FontFace aceita TTF, OTF, WOFF e WOFF2. Um arquivo corrompido ou de formato não suportado faz load() falhar; a página avisa em vez de deixar uma entrada quebrada no seletor.
• Os envios ficam apenas na memória — sem requisições de rede, sem gravação em disco, sem localStorage. É por isso que não sobrevivem a um recarregamento.
• As famílias genéricas são resolvidas internamente pelo navegador e não precisam de API nenhuma, e por isso continuam disponíveis onde as outras duas vias estão fechadas.