Guia

Uma explicação breve do que o CSS gerado faz e por que ele evita que o texto pule quando a sua fonte web chega.

Por que as fontes deslocam o layout

Enquanto uma fonte web carrega, o navegador desenha o texto em uma fonte de fallback. Quando a fonte web chega, o texto é redesenhado: se os glifos forem mais largos ou as linhas mais altas, as quebras de linha mudam e tudo o que está abaixo se move. O Google mede isso como Cumulative Layout Shift (CLS): 0,1 ou menos é bom, acima de 0,25 é ruim. Fazer a fonte de fallback corresponder às métricas da fonte web mantém as linhas onde estão.

Os descritores do @font-face que geramos

Cada fallback é uma fonte de sistema local() declarada com descritores que a redimensionam: size-adjust escala os glifos para que o texto tenha a mesma largura, e ascent-override, descent-override e line-gap-override definem as métricas verticais para que as linhas tenham a mesma altura. A pilha font-family lista primeiro a fonte web, depois os fallbacks ajustados e, por fim, uma família genérica.

@font-face {
  font-family: "Inter Fallback Arial";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-FF;
}

body {
  font-family: "Inter", "Inter Fallback Arial", sans-serif;
}

— significa não compatível, ? significa desconhecido. Os navegadores sem um descritor simplesmente o ignoram, então o CSS é seguro em qualquer lugar.

Safari e os overrides verticais

O Safari é compatível com size-adjust (desde a versão 17), mas não com ascent-override, descent-override nem line-gap-override. Para esses navegadores, o gerador adiciona font-size-adjust, que iguala a altura dos x da fonte web, e um line-height fixo, que torna a caixa da linha independente das métricas do fallback.

unicode-range

Uma face com unicode-range é usada apenas para os pontos de código listados. Limitar os fallbacks ajustados aos caracteres que a fonte web cobre evita que o ajuste se aplique a glifos que a fonte web nunca desenhará. Os intervalos são compactados sem perdas (pontos de código adjacentes são unidos) e correspondem aos subconjuntos usados pelo Google Fonts.

Formatos de fonte

Use WOFF2 na web: é o menor e todos os navegadores atuais o aceitam. Arquivos WOFF, TrueType (TTF) e OpenType (OTF) também funcionam com @font-face. Coleções de fontes (TTC, OTC) não podem ser usadas diretamente em um navegador, então esta ferramenta as divide em fontes separadas.

Licenças de fontes

Um arquivo de fonte é um software, e a sua licença define se você pode colocá-lo em um site. O CSS gerado apenas referencia fontes já instaladas no sistema do visitante (local()), mas a fonte web que você serve precisa ter licença para isso:

• SIL Open Font License (OFL): uso e incorporação livres; a fonte não pode ser vendida isoladamente.
• Apache License 2.0: uso e incorporação livres, com o aviso de licença.
• Ubuntu Font Licence (UFL): uso e incorporação livres; versões modificadas devem ser renomeadas.
• Licenças comerciais e de desktop muitas vezes não cobrem a incorporação na web: verifique se há uma licença web separada.

O texto e a URL da licença estão na tabela name da fonte (name IDs 13 e 14) e as permissões de incorporação estão na tabela OS/2 (fsType). Leia sempre também a licença na origem da fonte.

Especificações

• CSS Fonts Module Level 4
• CSS Fonts: @font-face descriptors
• WOFF File Format 1.0
• WOFF File Format 2.0
• Layout Instability API
• OpenType specification