Texto de carregamento visível

A Silktide verifica se o seu texto continua legível enquanto as fontes personalizadas estão a ser transferidas. Algumas configurações de fontes fazem com que os navegadores ocultem completamente o texto até que o ficheiro da fonte chegue, deixando os visitantes a olhar para uma página sem palavras.

Porque é importante

Os ficheiros de fontes são frequentemente grandes e, enquanto um deles é transferido, um navegador que não tenha recebido instruções em contrário pode apresentar como invisível o texto nessa fonte. Numa ligação lenta, este "flash de texto invisível" pode durar segundos: a página parece carregada — imagens e esquema visual estão no lugar — mas não diz nada. Os visitantes não conseguem ler e as ações baseadas em texto, como a navegação, ficam efetivamente em falta.

A parte frustrante é que o texto já está lá. Uma linha de por fonte informa o navegador para o mostrar numa fonte alternativa até que a fonte personalizada esteja pronta.

Como corrigir

Adicione font-display: swap a cada regra @font-face, para que o texto seja apresentado imediatamente numa fonte do sistema e mude quando a fonte personalizada chegar:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; \/* mostrar imediatamente o texto alternativo *\/
}

Para fontes carregadas a partir de um serviço de alojamento, utilize a opção do serviço para este efeito — por exemplo, um parâmetro display=swap no URL da folha de estilos — ou o código de incorporação atual, que normalmente já o inclui.
Escolha uma fonte alternativa com proporções semelhantes às da sua fonte personalizada, para que a mudança cause o mínimo de movimento possível — consulte Mudanças de esquema visual.

Como a Silktide testa isto

Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade de ligação e a localização de teste configurados para os seus testes de velocidade.
Analisa cada fonte personalizada utilizada pela página e verifica se a respetiva regra @font-face mantém o texto visível enquanto a fonte é carregada.
Comunica cada ficheiro de fonte que oculta texto, com uma estimativa do tempo durante o qual o texto permaneceu invisível.
Classifica a página com base no tempo total que poderia ser poupado: cerca de 100 milissegundos resulta numa classificação inferior e 200 milissegundos ou mais é classificado como fraco.

Resolução de problemas

A fonte vem de uma folha de estilos de terceiros

Não pode editar uma folha de estilos alojada por outro serviço, mas a solução geralmente está na forma como a solicita: a maioria dos serviços de fontes aceita uma opção de apresentação no URL ou disponibiliza um código de incorporação atualizado. Se um fornecedor não oferecer forma de definir isto, considere alojar a fonte por conta própria para controlar a regra.

Nunca vejo texto invisível

Com a fonte em cache ou numa ligação rápida, o intervalo é demasiado curto para ser notado — a verificação é importante para visitantes que acedem pela primeira vez em redes mais lentas. Há também uma desvantagem a ter em conta: com swap, esses visitantes veem brevemente a fonte alternativa. Uma breve mudança de fonte é quase sempre melhor do que texto em falta.

Utilizamos uma fonte de ícones

A substituição de uma fonte de ícones apresenta carateres de substituição onde deveriam estar os ícones, o que pode parecer uma falha. Especificamente para fontes de ícones, um curto período de bloqueio (font-display: block) ou a substituição da fonte por ícones SVG é frequentemente a melhor opção.