Guias práticos

Escolha e teste as fontes da Web em todos os idiomas

A tipografia precisa permanecer legível quando uma fonte chega atrasada, as traduções crescem mais e os caracteres estão faltando. Uma seleção visual por si só não valida sua integração.

Veja o método

Tipografia resiliente

preparar personagens realmente usados

Colete amostras em todos os idiomas com acentos, números, pontuação e palavras longas. Inclua formulários e erros em vez de apenas um título curto. Verifique a direção da escrita e os caracteres específicos do idioma no escopo do site.

Escolha os pesos e estilos necessários antes de multiplicar os arquivos. Reduza as variantes de acordo com o conteúdo e a hierarquia, em vez de remover distinções úteis. Verifique as condições da licença e a hospedagem permitida com a fonte selecionada.

Escolha uma estratégia de carregamento

Font-Display governa como uma fonte é exibida de acordo com sua disponibilidade. MDN descreve bloco, swap, fallback e opcional. Escolha de acordo com as necessidades de leitura e o contexto e observe o comportamento real do navegador.

Defina um fallback adequado para a experiência de leitura pretendida. Teste sem a fonte personalizada. Uma pré-carregamento ajuda apenas quando o arquivo é necessário e corresponde ao recurso solicitado; O pré-carregamento excessivo pode competir com o conteúdo essencial.

Layout de teste, zoom e estados

Verifique uma página densa, navegação, tabela e formulário com as fontes finais e de fallback. Teste as telas estreitas e o zoom. Botões, preços, nomes e erros devem permanecer disponíveis quando o texto ocupa mais espaço.

Compare os estados antes e depois do carregamento, incluindo quebras de linha, altura e movimento do botão primário. Capture as condições especificadas em vez de julgar uma tela de desktop já carregada. Repita as linguagens que diferem mais do design inicial.

Manter a decisão de tipografia

Mantenha a origem, os direitos verificados, os arquivos, os idiomas testados e as regras de carregamento na documentação do projeto. Repita os exemplos representativos antes de uma marca ou alteração de fonte afetar todas as telas.

Remova as variantes não utilizadas somente após verificar o conteúdo e os documentos que ainda podem solicitá-los. Forneça tipografia legível com rebatidas testadas, cobertura adequada de personagens e uma lista limitada de recursos justificados.

Documentação principal: DND — Exibição de fonte.

Documentos de referência

Conteúdo atualizado em 1º de outubro de 2026

Matriz de validação funcional para se adaptar ao projeto

Esses controles propostos usam casos fictícios. Decida qual comportamento é esperado com a equipe, anote o resultado e atribua discrepâncias não resolvidas antes da publicação.

Casos de teste, resultados esperados e evidências úteis
CasoResultado esperadoProva para guardar
Fonte principal indisponívelTexto, preços e ações permanecem legíveis antes ou sem o carregamento da fonte.Capturas de tela e jornadas concluídas com o download de fontes deliberadamente bloqueados.
Scripts e acentos publicadosCada amostra renderiza os personagens pretendidos pela equipe editorial.Amostras revisadas nas linguagens e sistemas de escrita realmente usados no site.
Zoom e largura estreitaEtiquetas e mensagens úteis não permanecem cortadas nem cobertas.Condições e componentes registrados contendo o texto realista mais longo.
Peso alterado ou famíliaAs variantes solicitadas combinam arquivos úteis com permissão de uso verificada.Inventário de arquivos, solicitações observadas e direitos registrados para a fonte de fonte selecionada.

Perguntas frequentes

Uma fonte de suporte ao francês cobre todos os idiomas?

Não. Verifique os caracteres, scripts e pesos dos idiomas publicados. Teste as amostras reais em vez de assumir a cobertura total de um único título.

Todas as fontes devem ser sempre pré-carregadas?

Não. Identifique os arquivos necessários para a renderização inicial e teste o benefício. Recursos não utilizados e variantes secundárias não precisam de pré-carregamento automaticamente.