Uma fonte baixada pode continuar sem ser usada porque o CSS seleciona outra face, o texto não está dentro do conjunto de caracteres compatíveis ou o período de exibição já terminou. Em um Mac, comece inspecionando a fonte que está renderizando um rótulo e, em seguida, rastreie o processo de seleção e carregamento.

Este guia é para quem mantém uma página da Web, consegue ver uma solicitação de fonte bem-sucedida, mas ainda vê o texto de fallback. Use o Chrome no macOS para as etapas de inspeção. O rótulo sintético Panel 204 e o nome de família Sample Sans abaixo ilustram o diagnóstico; eles não descrevem nenhum site específico.

O que um download bem-sucedido realmente comprova?

Trate o diagnóstico como quatro perguntas separadas: o recurso foi obtido? Uma face utilizável foi registrada? O CSS selecionou essa face para esses caracteres? O mecanismo de renderização a desenhou? Um preload de fonte inicia uma busca antecipada; sua presença não determina qual fonte fornece o texto visível. MDN: rel="preload"

A correspondência de fontes opera sobre o texto, não simplesmente sobre os arquivos baixados. O navegador considera as famílias e propriedades de fonte solicitadas e, em seguida, verifica a compatibilidade com os caracteres. Consequentemente, um rótulo pode usar várias fontes, e outra parte da página pode provocar o download de uma fonte sem fornecer muita informação sobre o rótulo que você está investigando. W3C: CSS Fonts Module Level 4, correspondência de fontes

Use esta tabela de decisão para escolher a próxima verificação. Ela é um recurso de diagnóstico derivado dos limites documentados de carregamento e correspondência, e não um registro de resultados medidos no navegador.

Observação Próxima verificação O que ajuda a distinguir
A família computada difere da família pretendida Siga a declaração CSS vencedora Problema de cascata ou direcionamento
A família computada está correta, mas a fonte renderizada é diferente Inspecione os descritores da face e a cobertura de caracteres Problema de seleção ou fallback
O JavaScript informa que uma face foi carregada, mas ela não está no conjunto de fontes do documento Inspecione o código de registro Carregamento sem registro
A fonte aparece após uma recarga, mas não na primeira visita Inspecione font-display e o tempo de carregamento Comportamento da janela de exibição
O texto comum funciona, mas o texto no canvas permanece inalterado Inspecione a ordem de desenho e as configurações de fonte do canvas Operação de desenho separada

Qual fonte está desenhando o rótulo em questão?

Na página afetada, pressione Command + Shift + C e selecione o texto. Em Elements, selecione o menor elemento que contém o rótulo afetado. Abra Computed e role até Rendered Fonts. O Chrome documenta essa visualização como o local para inspecionar as fontes que fornecem o texto renderizado. Chrome DevTools: referência de recursos de CSS, Chrome DevTools: aplicar outros efeitos

Registre a face renderizada e se a origem é local ou um recurso de rede. Registre também font-family, font-weight e font-style computados. A família computada é a pilha solicitada; o resultado das fontes renderizadas identifica o que forneceu os glifos. Uma aparência familiar, por si só, é uma evidência fraca, pois duas faces podem ser parecidas. Chrome DevTools: que fonte é essa?

Se a face pretendida aparecer no texto afetado, direcione a investigação para a diferença específica de aparência, como peso ou recursos tipográficos. Se ela estiver ausente, continue abaixo. Mantenha o texto original e a janela de visualização inalterados durante os testes para que cada observação possa ser comparada.

O CSS efetivo solicita a face pretendida?

Em Computed, inspecione as propriedades de fonte efetivas e, em seguida, use Styles para encontrar as declarações correspondentes. O Chrome distingue essas visualizações: Styles inclui declarações substituídas, enquanto Computed mostra os valores realmente aplicados. Inspecione o elemento filho que contém o texto quando um cartão tiver vários rótulos; a declaração de fonte do elemento pai não é evidência suficiente para o filho. Chrome DevTools: referência de recursos de CSS

Verifique qualquer abreviação vencedora de font, além das propriedades individuais. Por exemplo, font: 16px sans-serif seleciona uma família genérica e redefine os componentes omitidos da abreviação, incluindo peso e estilo. Também redefine propriedades como font-feature-settings e font-variation-settings. Corrija a declaração responsável pelo valor inesperado e inspecione novamente. MDN: font

Em seguida, compare a família solicitada com o descritor font-family na regra @font-face pertinente. Esse descritor define o nome de família CSS usado para referenciar a face; o nome do arquivo não é o nome que você deve colocar na pilha de fontes do elemento. Verifique a regra entregue ao navegador, incluindo seu src, peso, estilo e quaisquer intervalos declarados. MDN: @font-face

O intervalo de peso compatível de uma fonte variável pode ser expresso com dois valores, enquanto uma face estática pode declarar um único peso. Faça com que esses descritores representem com precisão o recurso fornecido. Uma incompatibilidade merece investigação, mas não explica automaticamente o fallback: a correspondência de fontes inclui alternativas quando um estilo exato não está disponível. MDN: @font-face, W3C: correspondência de estilos de fonte

Uma fonte local pode estar tendo precedência?

Inspecione src em busca de uma alternativa local(). Em um Mac com essa fonte instalada, o navegador pode usar a cópia local enquanto uma fonte da Web pré-carregada separadamente continua sem ser usada. Para isolar essa condição no Chrome, abra o painel Rendering, ative Disable local fonts e recarregue a página. Compare Rendered Fonts antes e depois e, em seguida, restaure a configuração. Esse teste se aplica às fontes de origem local() nas regras @font-face. Chrome DevTools: aplicar outros efeitos

A face foi carregada e registrada no documento correto?

Uma face criada com new FontFace() pode terminar de carregar antes de ser adicionada a um conjunto de fontes. Para renderizar o documento, ela precisa ser adicionada a document.fonts. Inspecione o fluxo de carregamento do aplicativo para verificar ambas as operações; apenas resolver a promessa de carregamento da face não conclui o registro. MDN: API de carregamento de fontes CSS

O diagnóstico completo a seguir, executado no console, lista as faces registradas no documento atual. Execute-o no contexto do console da página afetada. Ele lê o conjunto sem iniciar carregamentos nem alterar estilos; não identifica os glifos renderizados. Seu comportamento, que depende do navegador, não foi executado aqui.

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

Use o inventário para distinguir uma falha de registro de uma face registrada que continua sem ser usada. Para uma entrada cujo status seja error, investigue a falha de carregamento antes de ajustar a tipografia. Uma entrada loaded confirma o estado de carregamento, enquanto a seleção da face ainda depende do elemento e do texto. MDN: API de carregamento de fontes CSS

Não trate document.fonts.check() como prova de renderização. Ele pode retornar true até mesmo para uma família inexistente. Seu argumento de texto opcional restringe a correspondência com base nos intervalos Unicode declarados e não testa a cobertura de glifos individuais. Da mesma forma, document.fonts.ready é resolvido após o carregamento e a disposição das fontes usadas; não certifica que todas as faces declaradas foram renderizadas. MDN: FontFaceSet.check(), MDN: Document.fonts

A fonte cobre os caracteres que você está testando?

Verifique tanto o unicode-range do CSS quanto o recurso de fonte real. O descritor controla quais caracteres podem usar uma face. Ampliar o descritor não cria glifos ausentes do arquivo: o mapa de caracteres da fonte continua fazendo parte da correspondência. MDN: unicode-range, W3C: correspondência de estilos de fonte

Considere uma regra ilustrativa limitada a U+0030-0039. Em Panel 204, apenas 2, 0 e 4 estão dentro desse intervalo. As letras e o espaço não estão. Portanto, um download provocado pelos dígitos não comprova que a fonte consiga renderizar o rótulo inteiro. A MDN documenta que encontrar um caractere compatível pode fazer com que todo o recurso de fonte seja baixado. MDN: unicode-range

Este exemplo independente em JavaScript evidencia essa diferença. Ele pode ser executado no console de um navegador ou no Node.js, sem configuração. O cálculo determinístico do intervalo foi executado para o exemplo mostrado.

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

Se o intervalo excluir caracteres necessários, corrija um descritor impreciso ou forneça um subconjunto que os inclua. Preserve o texto original que falhou ao verificar o resultado. Não suponha que a iteração por uma string seja um teste de composição tipográfica: sequências de combinação exigem tratamento por agrupamentos, e o padrão considera as informações de composição tipográfica quando necessário. Mantenha as sequências intactas ao comparar a saída renderizada. W3C: correspondência de fontes e de agrupamentos

A fonte perdeu a janela de exibição?

Inspecione font-display quando a família e a cobertura parecerem corretas. optional tem um período de bloqueio extremamente curto e nenhum período de troca. fallback tem um período de troca curto. Assim, um recurso que chega após a janela aplicável pode deixar o texto de fallback visível durante aquele carregamento da página. swap permite um período de troca ilimitado após o período inicial de bloqueio. MDN: font-display

Para um diagnóstico controlado, altere temporariamente a regra afetada para font-display: swap na folha de estilos servida e repita as condições do carregamento inicial. Se a face aparecer após o carregamento, o tempo é uma explicação plausível. Antes de manter a configuração, decida se essa mudança visual posterior é adequada para a página. Repita tanto um carregamento inicial quanto uma recarga com cache; apenas o resultado em cache não reproduz o tempo de chegada original.

O que muda quando uma biblioteca ou o canvas desenha o texto?

Se a página já usa o Font Face Observer, inspecione a família observada e suas opções weight, style e stretch. A documentação descreve um carregador e monitor, exige as regras @font-face habituais e requer uma string de teste personalizada quando a fonte não possui os caracteres de teste padrão. O tempo limite padrão é de três segundos. Um tempo limite do observer e a janela font-display do navegador são condições distintas. Documentação do Font Face Observer

Como inferência diagnóstica, uma mensagem de sucesso do observer deve ser seguida pela inspeção do elemento em questão. Monitorar a disponibilidade de uma face não comprova que o CSS vencedor do elemento a solicite. Instalar outro carregador pouco ajuda quando a pergunta ainda sem resposta é qual face foi renderizada.

O canvas introduz um limite de desenho separado. Seu contexto de desenho tem uma configuração própria de font, inicialmente 10px sans-serif; uma atribuição inválida é ignorada. Portanto, definir uma família CSS no elemento canvas não basta para comprovar a fonte do contexto. Inspecione o valor atribuído ao contexto de desenho e a ordem das operações de carregamento e desenho. WHATWG: estilos de texto do canvas

Para o texto no canvas, aguarde o carregamento da face registrada pretendida, defina a fonte do contexto e, em seguida, redesenhe a cena afetada usando a rotina de desenho normal do aplicativo. Os pixels já desenhados não passam a usar outra tipografia quando uma fonte chega. A preparação do texto no canvas também usa uma caixa de linha hipotética de largura infinita, portanto um teste bem-sucedido no canvas não comprova que um rótulo de página da Web com restrições quebre linhas da mesma forma. WHATWG: preparação do texto e desenho de texto

Como confirmar o reparo?

Volte ao rótulo original e repita a observação que revelou o problema. Verifique a solicitação computada, a face renderizada e os caracteres relevantes nas condições de carregamento originais. No canvas, redesenhe antes de comparar. Mantenha um registro conciso do elemento, das propriedades solicitadas, da face realmente renderizada, do recurso e da alteração bem-sucedida; isso torna o diagnóstico reproduzível.

Conclua quando conseguir explicar por que a fonte não era usada e mostrar o resultado pretendido no texto afetado. Uma declaração de família corrigida, um subconjunto preciso, uma face registrada, uma política de exibição adequada ou um redesenho no momento certo abordam limites diferentes. Escolha o reparo respaldado pelas suas observações.

Fontes