Práticas recomendadas para fontes

Otimize as fontes da Web para as Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Este documento discute as práticas recomendadas de desempenho para fontes. Há várias maneiras de as fontes da Web afetarem o desempenho:

Este documento tem três seções: carregamento de fontes, entrega de fontes e renderização de fontes. Cada seção explica como esse aspecto específico do ciclo de vida da fonte funciona e fornece as práticas recomendadas correspondentes.

Carregamento de fontes

As fontes são recursos importantes. Sem eles, o usuário não poderá acessar o conteúdo da página. Portanto, as práticas recomendadas para o carregamento de fontes geralmente se concentram em garantir que as fontes sejam carregadas o mais cedo possível. É necessário ter um cuidado especial com fontes carregadas de sites de terceiros, já que o download desses arquivos de fonte exige configurações de conexão separadas.

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

A guia Timing no DevTools.

Entenda as @font-face

Antes de conhecer as práticas recomendadas para o 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, ele declara o nome usado para se referir à fonte e indica o local do arquivo de fonte correspondente.

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

Um equívoco comum é pensar que uma fonte é solicitada quando uma declaração @font-face é encontrada. Isso é falso. Por si só, a declaração @font-face não aciona o download da fonte. Em vez disso, uma fonte é transferida por download apenas se for referenciada pelo estilo usado na página. Exemplo:

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

h1 {
  font-family: "Open Sans"
}

Neste exemplo, Open Sans só seria feito o download se a página contivesse um elemento <h1>.

Portanto, ao pensar na otimização de fontes, é importante considerar as folhas de estilo tanto quanto os 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 fonte inline

A maioria dos sites se beneficiaria muito com a inserção de declarações de fontes e outros estilos importantes 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 cedo, 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>

O inline de CSS crítico pode ser uma técnica mais avançada que nem todos os sites conseguem fazer. Os benefícios de desempenho são claros, mas exigem outros processos e ferramentas de build para garantir que o CSS necessário, e idealmente apenas o CSS crítico, seja inline corretamente e que qualquer CSS adicional seja entregue de uma forma que não bloqueie o render.

Pré-conectar às origens de terceiros essenciais

Se o site carregar fontes de um site de terceiros, é altamente recomendável usar a sugestão 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 a seguir configura uma conexão para carregar a folha de estilos de fontes.

<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 servir folhas de estilo e fontes de origens separadas. Por exemplo, esta é a forma como a dica de recurso preconnect seria usada para as fontes do Google.

<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 as fontes detectáveis no início do processo de carregamento da página, isso acaba tirando os recursos do navegador do carregamento de outros recursos.

Alinhar declarações de fonte in-line e ajustar folhas de estilo pode ser uma abordagem mais eficaz. Esses ajustes se aproximam mais da causa raiz de fontes descobertas tardiamente, em vez de apenas fornecer uma solução alternativa.

Além disso, o uso de preload como uma estratégia de carregamento de fontes também precisa ser cuidadoso, 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 com prudência, só deve 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, já que o navegador não vai descobrir se a fonte é necessária até muito mais tarde.

Envio de fonte

A entrega mais rápida de fontes gera uma renderização de texto mais rápida. Além disso, se uma fonte for entregue com antecedência suficiente, isso pode ajudar a eliminar as mudanças de layout resultantes da troca de fontes.

Usar fontes auto-hospedadas

No papel, o uso de uma fonte auto-hospedada proporciona melhor performance, porque elimina uma configuração de conexão de terceiros. Na prática, as diferenças de desempenho entre essas duas opções são menos claras. Por exemplo, o Web Almanac descobriu que sites que usam fontes de terceiros têm uma renderização mais rápida do que as que usam fontes próprias.

Se você estiver considerando usar fontes auto-hospedadas, confirme se o site usa uma rede de entrega de conteúdo (CDN) e o HTTP/2. Sem o uso dessas tecnologias, é muito menos provável que as fontes auto-hospedadas ofereçam melhor desempenho.

Se você usa uma fonte auto-hospedada, é recomendável também aplicar algumas das otimizações de arquivos de fonte que provedores de fontes de terceiros normalmente oferecem automaticamente. Por exemplo, subconjunto de fontes e compactação WOFF2. O esforço necessário para aplicar esses otimizações depende um pouco dos idiomas com suporte no seu site. Em particular, lembre-se de que otimizar fontes para idiomas CJK pode ser bastante desafiador.

Usar o WOFF2

Entre as fontes modernas, WOFF2 é a mais recente, tem o suporte mais amplo de navegadores e oferece a melhor compressão. Como usa o Brotli, o WOFF2 comprime 30% melhor do que o WOFF, resultando em menos dados para download e, portanto, em um desempenho mais rápido.

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

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

Isso simplifica bastante seu CSS e seu fluxo de trabalho, além de evitar downloads de fontes duplos ou incorretos acidentais. O WOFF2 agora é aceito em todos os lugares. Portanto, a menos que você precise oferecer suporte a navegadores muito antigos, use o WOFF2. Se não for possível, não ofereça nenhuma fonte da Web para esses navegadores mais antigos. Isso não será um problema se você tiver uma estratégia de fallback robusta. Visitantes em navegadores mais antigos verão suas fontes substitutas.

Bram Stein, do Web Almanac 2022

Subconjunto de fontes

Os arquivos de fonte geralmente incluem um grande número de glifos para todos os diversos caracteres com suporte. No entanto, talvez você não precise de todos os caracteres na página e possa reduzir o tamanho dos arquivos de fonte usando subconjuntos de fontes.

O descritor unicode-range na declaração @font-face informa ao navegador para 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;
}

Um arquivo de fonte será transferido se a página tiver um ou mais caracteres que correspondam ao intervalo Unicode. O unicode-range é usado com frequência para exibir diferentes arquivos de fonte, dependendo do idioma usado pelo conteúdo da página.

O unicode-range é usado com frequência em conjunto com a técnica de subconjunto. Uma fonte de subconjunto inclui uma parte menor dos glifos contidos no arquivo de fonte original. Por exemplo, em vez de exibir todos os caracteres para todos os usuários, um site pode gerar fontes de subconjunto separadas para caracteres latinos e cirílicos.

O número de glifos por fonte varia muito:

  • As fontes latinas geralmente têm a magnitude de 100 a 1.000 glifos por fonte.
  • As fontes CJK podem ter mais de 10.000 caracteres.

A remoção de glifos não usados pode reduzir significativamente o tamanho do arquivo de uma fonte.

Alguns provedores de fontes podem fornecer versões diferentes de arquivos de fontes com diferentes subconjuntos automaticamente. 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;
}

Ao mudar para o autoatendimento, essa é uma otimização que pode ser perdida e levar a arquivos de fontes maiores localmente.

É possível fazer um subconjunto manual de fontes se o provedor permitir isso, seja com uma API (o Google Fonts oferece suporte a isso fornecendo um parâmetro text), ou editando manualmente os arquivos de fonte e fazendo a autohospedagem. As ferramentas para gerar subconjuntos de fontes incluem subfont e glyphanger.

Sempre verifique as licenças de fonte para confirmar se elas permitem subconjuntos e autohospedagem.

Usar menos fontes da Web

A fonte mais rápida a ser fornecida é aquela que não é solicitada. As fontes do sistema e as variáveis são duas maneiras de reduzir 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 geralmente 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 pode ser usada como substituto de vários arquivos de fonte. 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 pode ser usada para implementar letras que antes exigiam fontes separadas para light, regular, negrito e extra negrito.

Nem todos se beneficiam da mudança para fontes variáveis. As fontes variáveis contêm muitos estilos, então geralmente têm tamanhos de arquivo maiores do que fontes não variáveis individuais que contêm apenas um estilo. Os sites que vão notar a maior melhoria com o uso de fontes variáveis são aqueles que usam (e precisam usar) uma variedade de estilos e espessuras de fontes.

Renderização de fontes

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

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

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

Escolha uma estratégia font-display adequada

font-display informa ao navegador como proceder com a renderização de texto quando a fonte da Web associada não foi carregada. Ela é definida por 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 Infinito
Trocar 0ms Infinito
Fallback 100 ms 3 segundos
Opcional 100 ms Nenhum
  • 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 será invisí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 de fallback.
  • Período de troca: ocorre depois do 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 o trade-off entre desempenho e estética. Por isso, é difícil recomendar uma abordagem, já que ela depende das preferências individuais, da importância da fonte da Web para a página e a marca e de como uma fonte que chega atrasada pode ser irritante quando é trocada.

Na maioria dos sites, estas são as três estratégias mais aplicáveis, com base na sua prioridade máxima:

  • Desempenho: use font-display: optional. Essa é a abordagem mais "eficiente": a renderização de texto é atrasada por no máximo 100 ms e não há mudanças de layout relacionadas à troca de fontes. A desvantagem é que a fonte da Web não será usada se chegar atrasada.

  • Mostrar texto rapidamente e ainda usar uma fonte da Web: use font-display: swap, mas forneça a fonte com antecedência suficiente para que ela não cause uma mudança no layout. A desvantagem dessa opção é a mudança brusca quando a fonte chega tarde.

  • O texto aparece em uma fonte da Web: use font-display: block, mas envie a fonte com antecedência suficiente para minimizar o atraso do texto. A exibição inicial do texto está atrasada. Apesar desse atraso, ele ainda pode causar uma mudança de layout, já que o texto é exibido invisível, e o espaço de fonte padrão é usado para reservar o espaço. Depois que a fonte da Web é carregada, isso pode exigir espaço de diferença, portanto, uma mudança. Essa pode ser uma mudança menos brusca do que font-display: swap, porque o texto não vai mudar.

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

Fontes de ícones

As estratégias font-display que funcionam bem para fontes da Web convencionais não funcionam tão bem para fontes de ícones. A fonte de fallback de uma fonte de ícone geralmente parece significativamente diferente da fonte de ícone, e os caracteres dela podem transmitir um significado completamente diferente. Como resultado, as fontes de ícones têm mais probabilidade de causar mudanças significativas de layout.

Além disso, usar uma fonte de fallback pode não ser prático. Sempre que possível, substitua fontes de ícone por SVGs, o que também é melhor para a acessibilidade. Versões mais recentes de fontes de ícones conhecidas normalmente oferecem suporte a SVG. Para mais informações sobre a mudança para SVGs, consulte Font Awesome e Ícones do Material Design.

Reduzir a mudança entre a fonte padrão e a fonte da Web

Para reduzir o impacto da CLS, use os atributos size-adjust.

Conclusão

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