Práticas recomendadas para fontes

Otimize as fontes da Web para as Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Este artigo discute as práticas recomendadas de desempenho para fontes. As fontes da Web afetam o desempenho de várias maneiras:

Este artigo é dividido em três seções: carregamento de fonte, envio de fonte e renderização de fonte. Cada seção explica como esse aspecto específico do ciclo de vida da fonte funciona e apresenta as práticas recomendadas correspondentes.

Carregamento de fonte

As fontes normalmente são recursos importantes, porque sem elas o usuário pode não conseguir visualizar o conteúdo da página. Assim, as práticas recomendadas para o carregamento de fontes geralmente se concentram em garantir que as fontes sejam carregadas o mais cedo possível. É preciso ter cuidado especial com fontes carregadas de sites de terceiros, porque o download desses arquivos de fontes requer configurações de conexão separadas.

Se você não tiver certeza se as fontes da sua página estão sendo solicitadas a tempo, consulte a guia Tempo no painel Rede do Chrome DevTools para mais informações.

Captura de tela da guia "Timing" no DevTools

Noções básicas sobre @font-face

Antes de seguir as práticas recomendadas de carregamento de fontes, é importante entender como o @font-face funciona e como isso afeta o carregamento de fontes.

A declaração @font-face é uma parte essencial do trabalho com qualquer fonte da Web. No mínimo, ela declara o nome que será usado para se referir à fonte e indica o local do arquivo da fonte correspondente.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Um equívoco comum é achar que uma fonte é solicitada quando uma declaração @font-face é encontrada, o que não é verdade. Por si só, a declaração @font-face não aciona o download da fonte. Em vez disso, uma fonte só é baixada se é referenciada pelo estilo usado na página. Por exemplo, assim:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

Em outras palavras, no exemplo acima, o download de Open Sans só seria feito se a página contivesse um elemento <h1>.

Assim, ao pensar na otimização de fontes, é importante dar às folhas de estilo o mesmo valor que os próprios arquivos de fonte. Alterar o conteúdo ou a entrega das folhas de estilo pode ter um impacto significativo na chegada das fontes. Da mesma forma, remover CSS não utilizado e dividir folhas de estilo pode reduzir o número de fontes carregadas por uma página.

Declarações de fontes inline

A maioria dos sites se beneficiaria muito com declarações de fonte inline e outros estilos essenciais no <head> do documento principal, em vez de incluí-los em uma folha de estilo externa. Isso permite que o navegador descubra as declarações de fonte mais rapidamente, já que não precisa aguardar o download da folha de estilo externa.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

A inserção de elementos CSS essenciais em linha pode ser uma técnica mais avançada que nem todos os sites conseguirão realizar. Os benefícios para o desempenho são claros, mas são necessários processos adicionais e ferramentas de criação para garantir que o CSS (e, de preferência, somente o CSS essencial) seja alinhado corretamente e que qualquer CSS adicional seja fornecido sem bloqueio de renderização.

Pré-conexão com origens críticas de terceiros

Caso seu site carrega fontes de um site de terceiros, é altamente recomendável usar a dica de recurso preconnect para estabelecer conexões antecipadas com a origem de terceiros. As dicas de recursos precisam ser colocadas no <head> do documento. A dica de recurso abaixo configura uma conexão para carregar a folha de estilo de fonte.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Para pré-conectar a conexão usada para fazer o download do arquivo de fonte, adicione uma dica de recurso preconnect separada que use o atributo crossorigin. Ao contrário das folhas de estilo, os arquivos de fontes precisam ser enviados por uma conexão CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

Ao usar a dica de recurso preconnect, lembre-se de que um provedor de fontes pode disponibilizar folhas de estilo e fontes de origens separadas. Por exemplo, é assim que a dica de recurso preconnect seria usada para o Google Fonts.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Tenha cuidado ao usar preload para carregar fontes.

Embora o preload seja altamente eficaz em tornar fontes detectáveis no início do processo de carregamento de página, isso prejudica o carregamento de outros recursos do navegador.

Inserir declarações de fonte e ajustar folhas de estilo pode ser uma abordagem mais eficaz. Esses ajustes se aproximam de abordar a causa raiz das fontes descobertas tardiamente, em vez de apenas fornecer uma solução alternativa.

Além disso, usar preload como uma estratégia de carregamento de fonte também deve ser usado com cuidado, porque ele ignora algumas das estratégias de negociação de conteúdo integradas do navegador. Por exemplo, preload ignora declarações unicode-range e, se usado de maneira prudente, só pode ser usado para carregar um único formato de fonte.

No entanto, ao usar folhas de estilo externas, o pré-carregamento das fontes mais importantes pode ser muito eficaz, pois o navegador não descobrirá se a fonte é necessária muito mais tarde.

Exibição de fontes

A entrega de fontes mais rápida resulta em uma renderização de texto mais rápida. Além disso, se uma fonte for enviada cedo o suficiente, isso pode ajudar a eliminar mudanças de layout resultantes da troca de fontes.

Como usar fontes auto-hospedadas

No papel, o uso de uma fonte auto-hospedada melhora o desempenho porque elimina a configuração de uma conexão de terceiros. No entanto, na prática, as diferenças de desempenho entre essas duas opções são menos claras: por exemplo, o Almanaque da Web descobriu que sites com fontes de terceiros tinham uma renderização mais rápida do que as fontes com fontes primárias.

Se você estiver pensando em usar fontes auto-hospedadas, confirme se o site usa uma rede de fornecimento de conteúdo (CDN) e HTTP/2. Sem essas tecnologias, é muito menos provável que fontes auto-hospedadas ofereçam melhor desempenho. Para mais informações, consulte Redes de fornecimento de conteúdo.

Se você usa uma fonte auto-hospedada, é recomendável aplicar também algumas das otimizações de arquivos de fontes que os provedores de fontes de terceiros normalmente fornecem automaticamente. Por exemplo, a criação de subconjuntos de fontes e a compactação WOFF2. O esforço necessário para aplicar essas otimizações dependerá um pouco dos idiomas com suporte no seu site. É importante lembrar que otimizar fontes para idiomas CJK pode ser um desafio.

Usar WOFF2

Das fontes de fontes modernas, a WOFF2 é a mais recente, oferece a maior compatibilidade com navegadores e a melhor compactação. Por usar o Brotli, o WOFF2 compacta 30% melhor do que o WOFF, diminuindo os dados para download e, portanto, com um desempenho mais rápido.

Devido ao suporte ao navegador, os especialistas agora recomendam usar apenas o WOFF2:

Na verdade, também é hora de dizer: use apenas WOFF2 e esqueça todo o resto.

Isso simplifica imensamente o CSS e o fluxo de trabalho, além de evitar downloads acidentais ou duplicados de fontes. O WOFF2 agora tem suporte em todos os lugares. Portanto, a menos que você precise de suporte para navegadores antigos, basta usar WOFF2. Se isso não for possível, considere não exibir fontes da Web nesses navegadores mais antigos. Isso não será um problema se você tiver uma estratégia de substituição robusta. Os visitantes com navegadores mais antigos simplesmente verão suas fontes substitutas.

Bram Stein, do Almanaque da Web de 2022

Fontes do subconjunto

Os arquivos de fonte normalmente incluem um grande número de glifos para todos os diversos caracteres compatíveis. Mas talvez você não precise de todos os caracteres da página e pode reduzir o tamanho dos arquivos de fontes com a subconfiguração das fontes.

O descritor unicode-range na declaração @font-face informa ao navegador quais caracteres uma fonte pode ser usada.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

O download de um arquivo de fonte será feito se a página tiver um ou mais caracteres que correspondam ao intervalo Unicode. Geralmente, o unicode-range é usado para exibir arquivos de fonte diferentes, dependendo do idioma usado pelo conteúdo da página.

O unicode-range costuma ser usado em conjunto com a técnica de criação de subconjuntos. Uma fonte de subconjunto inclui uma porção menor dos glifos contidos no arquivo da fonte original. Por exemplo, em vez de exibir todos os caracteres para todos os usuários, um site pode gerar fontes de subconjuntos separadas para caracteres latinos e cirílicos. O número de glifos por fonte varia muito: as fontes latinas costumam ter de 100 a 1.000 glifos por fonte. As fontes CJK podem ter mais de 10 mil caracteres. A remoção de glifos não utilizados pode reduzir significativamente o tamanho do arquivo de uma fonte.

Alguns provedores de fontes podem fornecer automaticamente versões diferentes dos arquivos de fontes com diferentes subconjuntos. Por exemplo, o Google Fonts faz isso por padrão:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Na opção de auto-hospedagem, esta é uma otimização que pode ser facilmente ignorada e levar a arquivos de fontes maiores localmente.

Também é possível criar um subconjunto de fontes manualmente, caso o provedor permita, seja por uma API (o Google Fonts oferece suporte ao fornecer um parâmetro text) ou editando manualmente os arquivos da fonte e hospedando seus dados. As ferramentas para gerar subconjuntos de fontes incluem subfont e glyphanger. No entanto, verifique na licença as fontes que permitem a criação de subconjuntos e a auto-hospedagem.

Usar menos fontes da Web

A fonte mais rápida de ser entregue é aquela que não é solicitada. As fontes do sistema e as variáveis são duas maneiras de reduzir potencialmente o número de fontes da Web usadas no seu site.

Uma fonte do sistema é a fonte padrão usada pela interface do usuário do dispositivo. As fontes do sistema normalmente variam de acordo com o sistema operacional e a versão. Como a fonte já está instalada, não é necessário fazer o download dela. As fontes do sistema podem funcionar muito bem para o corpo do texto.

Para usar a fonte do sistema no CSS, liste system-ui como a família de fontes:

font-family: system-ui

A ideia por trás das fontes variáveis é que uma única fonte variável possa ser usada para substituir vários arquivos de fontes. As fontes variáveis funcionam definindo um estilo de fonte "padrão" e fornecendo eixos para manipular a fonte. Por exemplo, uma fonte variável com um eixo Weight poderia ser usada para implementar letras que antes precisavam de fontes separadas para luz, normal, negrito e negrito extra.

Nem todos se beneficiarão com a mudança para fontes variáveis. As fontes variáveis contêm muitos estilos, por isso, normalmente têm tamanhos de arquivo maiores do que as fontes não variáveis individuais que contêm apenas um estilo. Os sites que terão a maior melhoria com o uso de fontes variáveis são aqueles que usam (e precisam usar) uma variedade de estilos e pesos de fonte.

Renderização da fonte

Ao enfrentar uma fonte da Web que ainda não foi carregada, o navegador se depara com um dilema: ele deve adiar a renderização do texto até que a fonte da Web tenha chegado? Ou ele deveria renderizar o texto em uma fonte substituta até que a fonte da Web chegue?

Navegadores diferentes lidam com esse cenário de maneira diferente. Por padrão, os navegadores baseados no Chromium e o Firefox bloquearão a renderização de texto por até três segundos se a fonte da Web associada não for carregada. O Safari bloqueará a renderização de texto indefinidamente.

Esse comportamento pode ser configurado usando o atributo font-display. Essa escolha pode ter implicações significativas: o font-display pode afetar a LCP, a FCP e a estabilidade do layout.

Escolha uma estratégia de font-display adequada

font-display informa ao navegador como proceder com a renderização de texto quando a fonte da Web associada não for carregada. Ela é definida por tipo de fonte.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

Há cinco valores possíveis para font-display:

Valor Período de bloqueio Período de troca
Automático Varia de acordo com o navegador Varia de acordo com o navegador
Bloquear 2 a 3 segundos Indeterminado
Trocar 0ms Indeterminado
Fallback 100 ms 3 segundos
Opcional 100 ms Nenhuma
  • Período de bloqueio: o período de bloqueio começa quando o navegador solicita uma fonte da Web. Durante o período de bloqueio, se a fonte da Web não estiver disponível, ela será renderizada em uma fonte substituta invisível e, portanto, o texto não ficará visível para o usuário. Se a fonte não estiver disponível no final do período de bloqueio, ela será renderizada na fonte substituta.
  • Período de troca: o período de troca vem após o período de bloqueio. Se a fonte da Web ficar disponível durante o período de troca, ela será "trocada".

As estratégias de font-display refletem diferentes pontos de vista sobre a compensação entre performance e estética. Por isso, é difícil oferecer uma abordagem recomendada, porque ela depende de preferências individuais, da importância da fonte da Web para a página e da marca e de como uma fonte tardia pode ser desagradável quando trocada.

Estas são as três estratégias mais aplicáveis para a maioria dos sites:

  • Se o desempenho for a prioridade:use font-display: optional. Essa é a abordagem com melhor desempenho: a renderização de texto é atrasada por não mais de 100 ms e há garantia de que não haverá mudanças de layout relacionadas à troca de fontes. No entanto, a desvantagem é que a fonte da Web não será usada se chegar atrasada.

  • Se exibir texto rapidamente for uma prioridade, mas você ainda quiser garantir que a fonte da Web seja usada:use font-display: swap, mas envie a fonte com antecedência suficiente para não causar uma mudança no layout. A desvantagem dessa opção é a mudança desagradável quando a fonte chega atrasada.

  • Se a prioridade for garantir que o texto seja exibido como uma fonte da Web:use font-display: block, mas envie a fonte com antecedência suficiente para minimizar o atraso do texto. A desvantagem disso é que a exibição inicial do texto será atrasada. Apesar disso, ele ainda pode causar uma mudança de layout, já que o texto é desenhado invisível e, portanto, o espaço da fonte substituta é usado para reservar o espaço Uma vez que a fonte da Web é carregada, isso pode exigir espaço de diferença e, portanto, uma mudança. No entanto, essa pode ser uma mudança menos desagradável do que font-display: swap, já que o texto em si não será visto como mudando.

Lembre-se também de que essas duas abordagens podem ser combinadas. Por exemplo, use font-display: swap para branding e outros elementos de página visualmente distintos. Use font-display: optional para fontes usadas no corpo do texto.

Reduzir a mudança entre a fonte substituta e a fonte da Web

Para reduzir o impacto na CLS, você pode usar os novos atributos size-adjust. Para mais informações, consulte o artigo sobre CSS size-adjust. Essa é uma adição muito nova ao nosso conjunto de ferramentas, por isso é mais avançada e um pouco manual no momento. Mas definitivamente vale a pena testar e ficar de olho nas melhorias nas ferramentas no futuro!

Conclusão

As fontes da Web ainda são um gargalo de desempenho, mas temos uma gama cada vez maior de opções que nos permitem otimizá-las para reduzir esse gargalo o máximo possível.