Exiba o texto alternativo rapidamente quando os leitores precisarem das palavras para usar uma página. Escolha a ocultação temporária somente para um elemento pequeno cuja dependência da fonte seja justificada. Para uma página que você mantém em um Mac, este guia explica como escolher uma política e testar seu efeito no fluxo do texto.

O que realmente muda enquanto uma fonte carrega?

Uma fonte alternativa renderiza o mesmo texto em outro tipo de letra enquanto a fonte solicitada não está disponível. O texto temporariamente oculto corresponde ao período de bloqueio do carregamento da fonte: o navegador organiza o layout usando uma fonte alternativa invisível. A linha do tempo do carregamento começa quando o navegador tenta usar pela primeira vez a fonte baixável. A referência de font-display da MDN explica essas etapas.

Essa distinção importa ao revisar uma página. Um título em branco não comprova que suas dimensões finais foram reservadas. Durante o período de bloqueio, o navegador ainda usa o layout da fonte alternativa; ocultar as letras não determina as quebras de linha que a fonte baixada terá. Avalie a visibilidade e a estabilidade do layout separadamente.

O controle relevante é o descritor font-display dentro de uma regra @font-face. Ele pertence à definição da fonte, não a um seletor comum de parágrafo. Esta é uma escolha de autoria da página: use a folha de estilos ou as configurações de fonte disponíveis para a página que você mantém. A MDN documenta onde font-display se aplica.

Qual valor de font-display atende à tarefa do leitor?

Antes de editar, decida duas coisas: se as palavras devem aparecer rapidamente em outra fonte e se é aceitável substituí-la mais tarde. A tabela a seguir traduz os períodos de carregamento documentados em opções para uma página pública abstrata. As definições de valores da MDN descrevem o comportamento subjacente.

Valor Enquanto a fonte não está disponível Possibilidade de substituir a alternativa Ponto de partida adequado
swap Bloqueio extremamente breve, seguido de alternativa visível Período de troca ilimitado Um título curto cuja tipografia desejada é importante
fallback Bloqueio extremamente breve, seguido de alternativa visível Período de troca curto Texto de leitura em que uma mudança inicial é aceitável
optional Bloqueio extremamente breve Sem período de troca Texto em que manter a primeira fonte visível é o mais importante
block Alternativa invisível durante um período de bloqueio curto, depois alternativa visível Período de troca ilimitado Um elemento pequeno com dependência específica de fonte
auto Política escolhida pelo navegador Política escolhida pelo navegador Aceitar o comportamento padrão do navegador

Essas são categorias de política, não cronômetros exatos que você possa configurar. O rascunho atual do CSS Fonts Level 4 do W3C recomenda durações típicas, mas permite explicitamente variações entre navegadores. Ele também restringe block a pequenos trechos de texto cuja fonte específica seja necessária para a usabilidade. Preferir a aparência de um título, por si só, é um motivo fraco para deixá-lo em branco. W3C: Controlar a exibição de fontes por fonte.

Em uma página fictícia com um título chamado “Sample Collection”, uma navegação chamada “Section One” e vários parágrafos, comece considerando fallback para o texto de leitura. Considere swap para o título curto se for importante usar a tipografia desejada mais tarde. Escolha optional quando manter a primeira renderização visível for prioritário. Essas recomendações aplicam as políticas documentadas à tarefa do leitor; não são resultados medidos.

Use um recurso de apoio para decidir sobre visibilidade e refluxo

Avalie cada função do texto separadamente. Um rótulo de navegação e um parágrafo podem usar a mesma família de fontes, mas suas restrições de layout são diferentes. A pergunta útil é se a mudança de fonte impede alguém de continuar a tarefa ou apenas altera a aparência.

  1. Leia a página com a fonte alternativa. Alguém consegue entender “Section One”, identificar o título e ler os parágrafos? Se sim, a alternativa visível é um ponto de partida viável.
  2. Observe a substituição da fonte. O título passa a ocupar mais uma linha? Os rótulos quebram em várias linhas? O parágrafo seguinte muda de posição?
  3. Escolha o período de substituição aceitável. Use swap quando uma substituição tardia continuar aceitável, fallback quando apenas uma substituição inicial for bem-vinda ou optional quando a primeira fonte visível deve permanecer.
  4. Exija um motivo concreto para deixar o texto em branco. Antes de escolher block, identifique o que ficaria inutilizável com a fonte alternativa e por que essa dependência não pode ser eliminada.

Por exemplo, suponha que “Sample Collection” ocupe uma linha com a fonte alternativa e duas com a fonte baixada. Se o título tiver uma altura de linha hipotética de 40 pixels, a linha adicional aumentará sua altura em 40 pixels, supondo que o espaçamento não mude. O conteúdo abaixo poderá se deslocar de acordo. Esses valores são ilustrativos, não medições do navegador.

A ocultação temporária não resolve essa incompatibilidade. As opções práticas são melhorar a correspondência da fonte alternativa, ajustar o layout após os testes ou selecionar uma política que evite uma substituição tardia. Segundo o comportamento optional do rascunho atual do W3C, depois que o texto alternativo for exibido, a fonte opcional não poderá substituí-lo durante a vida útil daquela página. A definição de optional do W3C.

Como aplicar e testar a escolha em um Mac

Use uma página cuja folha de estilos você possa editar e cuja fonte da Web existente já carregue corretamente. Mantenha a referência ao arquivo de fonte atual; não é necessário baixar uma nova fonte nem usar um recurso substituto para esta comparação.

Encontre a declaração @font-face relevante na folha de estilos da página ou na configuração de fontes compatível. Defina o descritor font-display com o valor candidato, como font-display: fallback;. Revise as outras declarações usadas para pesos e estilos para que o teste abranja as fontes que a página realmente solicita. O exemplo de font-display da MDN mostra onde posicionar o descritor.

No Chrome no Mac, pressione Command + Option + I para abrir o DevTools. Como alternativa, clique com o botão direito no texto desejado e escolha Inspecionar; o painel Elements mostra o CSS aplicado em Styles. As instruções para abrir o DevTools do Chrome documentam os dois caminhos.

Faça a seguinte comparação após cada alteração na folha de estilos. Mantenha a largura da janela e o zoom constantes para poder atribuir as diferenças à política de carregamento da fonte.

  1. Abra Network, ative Disable cache, selecione uma predefinição mais lenta no menu Throttling e recarregue a página. Use o filtro Font para se concentrar nas solicitações de fontes.
  2. Observe o título, a navegação e o início dos parágrafos. Registre se o texto começa em branco, aparece com a fonte alternativa e depois muda as quebras de linha.
  3. Se a transição acontecer rápido demais para ser analisada, ative Capture screenshots nas configurações do painel Network e recarregue a página para inspecionar a sequência de carregamento.
  4. Desative a limitação e desmarque Disable cache. Recarregue a página para comparar uma visita repetida em condições normais. A referência de recursos de Network do Chrome documenta esses controles.

Teste separadamente o resultado quando a fonte estiver indisponível. Em Network, clique com o botão direito na solicitação da fonte atual e selecione Block request; em seguida, recarregue a página. O Chrome lista o padrão correspondente em Request conditions. Verifique se as palavras ficam legíveis e se a página continua utilizável com a fonte alternativa. Depois, remova ou desative o padrão de teste. A documentação de condições de solicitação do Chrome explica o bloqueio e como identificar solicitações bloqueadas.

Repita a revisão da página no Safari se ele fizer parte do ambiente de navegação Mac pretendido. Trate o teste do Chrome como evidência da renderização nesse navegador, não como prova de que os tempos serão idênticos em outros: a especificação permite diferenças entre navegadores. Mantenha uma pequena nota comparativa com o navegador, o valor candidato, a visibilidade inicial e as quebras de linha observadas.

E se a fonte alternativa visível alterar demais o layout?

Comece pelo texto real e pela largura disponível. Compare rótulos curtos, o título mais longo e algumas linhas de parágrafo. Uma fonte alternativa que se parece visualmente com a fonte da Web ainda pode ter avanços de caracteres diferentes e produzir outras quebras de linha.

Para obter uma correspondência mais próxima, size-adjust dimensiona os contornos e as métricas dos glifos de uma fonte, incluindo os avanços dos glifos. A MDN demonstra como definir uma fonte alternativa local e ajustá-la para que corresponda melhor à fonte principal da Web. Determine a porcentagem adequada para o par de fontes real; a porcentagem de um exemplo da documentação não é uma configuração universal. MDN: size-adjust.

As métricas verticais merecem uma verificação separada. O descritor ascent-override controla a métrica acima da linha de base usada no layout das caixas de linha, mas a MDN atualmente indica que sua disponibilidade é limitada. Trate esse ajuste como um aprimoramento e mantenha um layout alternativo legível nos navegadores que não o suportam. MDN: ascent-override.

Deixe a composição do texto a cargo do navegador. Não tente estabilizar um título substituindo ou medindo cada caractere individualmente. A correspondência de fontes em CSS trata grupos de grafemas de forma especial, como um caractere-base com um sinal diacrítico combinante. Inspecione rótulos e linhas completos no layout real. W3C: Correspondência de agrupamentos.

O pré-carregamento ou uma biblioteca de carregamento de fontes muda a decisão?

O pré-carregamento trata da descoberta de recursos. O padrão HTML do WHATWG define preload como a busca e o armazenamento em cache antecipados de um recurso esperado para a navegação atual. Isso não seleciona sua política de font-display. Considere essa opção somente depois de escolher o comportamento visível aceitável; buscar o recurso antes não substitui a decisão sobre o que acontece quando a fonte ainda está indisponível. WHATWG: Tipo de link preload.

Para o texto comum de uma página, comece pelo CSS. Se um projeto existente usa Font Face Observer, o método documentado load() retorna uma promessa que é cumprida quando a fonte carrega e rejeitada em caso de falha. O nome da família e as descrições opcionais de peso, estilo e expansão devem corresponder à fonte solicitada. A biblioteca também documenta como fornecer um texto de teste adequado quando os caracteres padrão não existem na fonte. Documentação do Font Face Observer.

Uma chamada de retorno bem-sucedida da biblioteca sinaliza o carregamento; a aplicação ainda determina o que ficará visível. Se uma lógica personalizada ocultar o texto, especifique um caminho de falha que restaure a fonte alternativa legível. Caso contrário, uma falha de carregamento pode deixar ativa a regra de ocultação da aplicação. Esta recomendação de implementação decorre dos caminhos de sucesso e falha documentados pela biblioteca.

A API nativa tem um limite semelhante. document.fonts.ready é cumprida depois que terminam o carregamento e as operações de layout das fontes utilizadas; esse conjunto pode diferir de todas as fontes declaradas, incluindo fontes opcionais que perderam a oportunidade de uso. Portanto, isso não comprova que todas as fontes pretendidas estejam visíveis. MDN: propriedade fonts de Document.

Da mesma forma, o argumento de texto opcional de document.fonts.load() seleciona fontes correspondentes por meio dos intervalos Unicode; ele não verifica a cobertura de glifos individuais. A conclusão do carregamento e a renderização correta do texto de exemplo completo continuam sendo verificações distintas. MDN: método load() de FontFaceSet.

Escolha a política revisando versões da mesma página com carregamento lento, fonte indisponível e carregamento repetido. Mantenha as palavras comuns legíveis, decida explicitamente se uma substituição tardia é aceitável e aceite a ocultação temporária somente quando um elemento pequeno tiver uma dependência comprovada da fonte. O resultado deve permitir que alguém continue lendo “Sample Collection” com conforto em cada condição testada.

Fontes