Reduzir o tamanho da fonte na Web

A tipografia é fundamental para um bom design, marca, legibilidade e acessibilidade. As fontes da Web permitem tudo isso e muito mais: o texto é selecionável, pesquisável, ampliável e fácil de usar com DPI alto, oferecendo uma renderização de texto consistente e nítida, independentemente do tamanho e da resolução da tela. As WebFonts são essenciais para oferecer design, experiência de usuário e desempenho de qualidade.

A otimização de fontes da Web é um fator crítico da estratégia geral de performance. Cada fonte é um recurso adicional, e algumas podem bloquear a renderização do texto. No entanto, o uso de WebFonts não significa que a renderização da página será mais lenta. Pelo contrário, fontes otimizadas, combinadas com uma estratégia sensata para a forma como elas são carregadas e aplicadas na página, podem ajudar a reduzir o tamanho total e o tempo de renderização.

Anatomia de uma fonte da Web

Uma fonte da Web é uma coleção de glifos. Cada glifo é uma forma vetorial que descreve uma letra ou símbolo. Como resultado, duas variáveis simples determinam o tamanho de um arquivo de fonte específico: a complexidade dos caminhos vetoriais de cada glifo e o número de glifos em cada fonte. Por exemplo, Open Sans, uma das WebFonts mais conhecidas, contém 897 glifos, que incluem caracteres latinos, gregos e cirílicos.

Tabela de glifos da fonte

Ao escolher uma fonte, é importante considerar quais conjuntos de caracteres são aceitos. Se você precisar localizar o conteúdo da página para vários idiomas, use uma fonte que possa oferecer aparência e experiência consistentes aos usuários. Por exemplo, a família de fontes Noto do Google pretende ser compatível com todos os idiomas do mundo. Observe, entretanto, que o tamanho total do Noto, com todos os idiomas incluídos, resulta em um download de ZIP com mais de 1,1 GB.

Neste post, você vai descobrir como reduzir o tamanho do arquivo das fontes da Web.

Formatos de fontes da Web

Atualmente, existem dois formatos de contêiner de fonte recomendados em uso na Web:

O WOFF e o WOFF 2.0 têm amplo suporte e são compatíveis com todos os navegadores modernos.

  • Sirva a variante WOFF 2.0 para navegadores modernos.
  • Se for absolutamente necessário, por exemplo, se ainda for preciso oferecer suporte ao Internet Explorer 11, disponibilize o WOFF como substituto.
  • Como alternativa, considere não usar fontes da Web para navegadores legados e usar as fontes do sistema. Isso também pode melhorar o desempenho em dispositivos mais antigos e restritos.
  • Como WOFF e WOFF 2.0 abrangem todas as bases para navegadores modernos e legados ainda em uso, o uso de EOT e TTF não são mais necessários e podem resultar em tempos de download de fontes da web mais longos.

Fontes da Web e compactação

O WOFF e o WOFF 2.0 têm compressão integrada. A compressão interna do WOFF 2.0 usa Brotli e oferece até 30% de compressão a mais do que o WOFF. Para mais informações, consulte o relatório de avaliação do WOFF 2.0.

Por fim, é bom saber que alguns formatos de fonte contêm metadados adicionais, como informações de hinting e kerning de fontes, que podem ser desnecessárias em algumas plataformas, o que permite otimizar ainda mais o tamanho do arquivo. Por exemplo, o Google Fonts mantém mais de 30 variantes otimizadas para cada fonte e detecta e fornece automaticamente a variante ideal para cada plataforma e navegador.

Definir uma família de fontes com @font-face

A at-rule CSS @font-face permite definir o local de um determinado recurso de fonte, suas características de estilo e os codepoints Unicode para os quais deve ser usado. Uma combinação dessas declarações @font-face pode ser usada para construir uma "família de fontes", que o navegador usará para avaliar quais recursos de fonte precisam ser transferidos por download e aplicados à página atual.

Considere uma fonte variável

As fontes variáveis podem reduzir significativamente o tamanho do arquivo de fontes em casos em que você precisa de várias variantes de uma fonte. Em vez de carregar os estilos normal e em negrito, além das versões em itálico, você pode carregar um único arquivo com todas as informações. No entanto, os tamanhos de arquivos de fontes variáveis são maiores do que uma variante de fonte individual, mas menores do que a combinação de muitas variantes. Em vez de uma fonte variável grande, pode ser melhor exibir primeiro as variantes de fonte essenciais, com outras variantes sendo baixadas depois.

Agora todos os navegadores modernos oferecem suporte a fontes variáveis. Saiba mais na Introdução às fontes variáveis na Web.

Selecione o formato correto

Cada declaração @font-face especifica o nome da família de fontes, que atua como um grupo lógico de várias declarações, propriedades de fonte, como estilo, peso e extensão, e o descritor src, que especifica uma lista priorizada de locais do recurso de fonte.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Antes de mais nada, observe que os exemplos acima definem uma única família Awesome Font com dois estilos (normal e itálico), cada um deles apontando para um conjunto diferente de recursos de fonte. Por sua vez, cada descritor src contém uma lista priorizada de variantes do recurso, separadas por vírgula:

  • A diretiva local() permite referenciar, carregar e usar fontes instaladas localmente. Se o usuário já tiver a fonte instalada no sistema, isso vai contornar a rede por completo e será a opção mais rápida.
  • A diretiva url() permite carregar fontes externas e pode conter uma dica opcional format(), indicando o formato da fonte referenciada pelo URL especificado.

Quando o navegador determina que a fonte é necessária, ele percorre a lista de recursos fornecida na ordem especificada e tenta carregar o recurso apropriado. Por exemplo, seguindo o exemplo acima:

  1. O navegador executa o layout da página e determina quais variantes de fontes são necessárias para renderizar o texto especificado na página. As fontes que não fazem parte do CSS Object Model (CSSOM) da página não são baixadas pelo navegador, porque não são necessárias.
  2. Para cada fonte necessária, o navegador verifica se a fonte está disponível localmente.
  3. Se a fonte não está disponível localmente, o navegador percorre as definições externas:
    • Se uma dica de formato estiver presente, o navegador verificará se ela é permitida antes de iniciar o download. Se não oferecer suporte para a dica, o navegador avança para a próxima.
    • Se nenhuma dica de formato estiver presente, o navegador fará o download do recurso.

A combinação de diretivas locais e externas com dicas de formato adequadas permite especificar todos os formatos de fonte disponíveis e deixar que o navegador se encarregue do resto. O navegador determina quais recursos são necessários e seleciona o formato ideal.

Subconjuntos de intervalo Unicode

Além das propriedades de fonte como estilo, peso e extensão, a regra @font-face permite definir um conjunto de codepoints Unicode compatível com cada recurso. Isso permite dividir uma fonte Unicode grande em subconjuntos menores (por exemplo, subconjuntos latino, cirílico e grego) e fazer o download apenas dos glifos necessários para renderizar o texto em uma determinada página.

O descritor unicode-range permite especificar uma lista delimitada por vírgulas de valores de intervalo. Cada intervalo pode ter um destes três formatos diferentes:

  • Único codepoint (por exemplo, U+416)
  • Intervalo (por exemplo, U+400-4ff): indica os codepoints inicial e final de um intervalo
  • Intervalo de caracteres curinga (por exemplo, U+4??): os caracteres ? indicam qualquer dígito hexadecimal

Por exemplo, você pode dividir sua família Awesome Font em subconjuntos latinos e japoneses, que são transferidos por download pelo navegador conforme necessário:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

O uso de subconjuntos de intervalos Unicode e de arquivos separados para cada variante de estilo da fonte permite definir uma família de fontes composta com download mais rápido e eficiente. Os visitantes só fazem o download das variantes e dos subconjuntos necessários, sem que eles sejam forçados a fazer o download de subconjuntos que nunca serão vistos ou usados na página.

Quase todos os navegadores oferecem suporte a unicode-range. Para compatibilidade com navegadores mais antigos, talvez seja necessário usar a "criação manual de subconjuntos". Nesse caso, é preciso fornecer um único recurso de fonte que contenha todos os subconjuntos necessários e ocultar os demais do navegador. Por exemplo, se a página usar apenas caracteres latinos, pode-se eliminar outros glifos e servir esse subconjunto específico como um recurso independente.

  1. Determine quais subconjuntos são necessários:
    • Se o navegador suportar a criação de subconjuntos com unicode-range, o subconjunto correto será selecionado automaticamente. A página só precisa fornecer os arquivos de subconjuntos e especificar unicode-ranges apropriados nas regras @font-face.
    • Se o navegador não oferecer suporte à criação de subconjuntos com unicode-range, a página precisará ocultar todos os subconjuntos desnecessários. Ou seja, o desenvolvedor terá que especificar os subconjuntos necessários.
  2. Gere subconjuntos de fontes:
    • Use a ferramenta pyftsubset de código aberto para criar subconjuntos e otimizar suas fontes.
    • Alguns servidores de fontes, como o Google Fonts, fazem subconjuntos automaticamente por padrão.
    • Alguns serviços de fontes permitem a criação manual de subconjuntos por meio de parâmetros de consulta personalizada, que podem ser usados para especificar manualmente o subconjunto necessário para a página. Consulte a documentação do seu provedor de fontes.

Seleção e síntese de fontes

Cada família de fontes pode ser composta de diversas variantes de estilo (regular, negrito, itálico) e diversos pesos para cada estilo. Cada um deles pode conter formas de glifos muito diferentes, por exemplo, espaçamento ou tamanho diferentes ou uma forma totalmente distinta.

Pesos da fonte

O diagrama acima ilustra uma família de fontes que oferece três pesos diferentes de negrito:

  • 400 (regular).
  • 700 (negrito).
  • 900 (negrito extra).

Todas as outras variantes intermediárias (indicadas em cinza) são mapeadas automaticamente para a variante mais próxima pelo navegador.

Quando um peso especificado não tem uma face correspondente, é usada uma face com peso próximo. Em geral, pesos de negrito são mapeados a tipos de fonte com pesos maiores e pesos leves são mapeados a tipos de fonte com pesos menores.

Algoritmo de correspondência de fontes CSS

Uma lógica semelhante se aplica às variantes em itálico. O designer de fontes controla quais variantes serão produzidas, e você controla quais variantes vai usar na página. Como cada variante é um download separado, é uma boa ideia manter o número de variantes pequeno. Por exemplo, você pode definir duas variantes em negrito para a família Awesome Font:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

O exemplo acima declara a família Awesome Font, que é composta por dois recursos que abrangem o mesmo conjunto de glifos latinos (U+000-5FF), mas oferecem dois "pesos" diferentes: normal (400) e negrito (700). No entanto, o que acontecerá se uma de suas regras CSS especificar um peso de fonte diferente ou definir a propriedade font-style como italic?

  • Se uma correspondência exata de fonte não estiver disponível, o navegador vai substituir a correspondência mais próxima.
  • Se nenhuma correspondência de estilo for encontrada (por exemplo, nenhuma variante em itálico foi declarada no exemplo acima), o navegador sintetizará sua própria variante de fonte.
Síntese de fontes

O exemplo acima ilustra a diferença entre a fonte Open Sans real e a sintetizada. Todas as variantes sintetizadas são geradas a partir de uma única fonte de peso 400. Como você pode ver, há uma diferença visível nos resultados. Os detalhes de como gerar as variantes negrito e oblíquo não são especificados. Portanto, os resultados variam de navegador para navegador e dependem muito da fonte.

Lista de verificação para a otimização do tamanho da fonte da Web

  • Faça uma auditoria e monitore o uso das fontes:não as use em excesso nas páginas e minimize o número de variantes usadas para cada fonte. Isso ajuda a produzir uma experiência mais consistente e rápida para seus usuários.
  • Evite formatos legados, se possível:os formatos EOT, TTF e WOFF são maiores do que WOFF 2.0. EOT e TTF são formatos estritamente desnecessários, enquanto WOFF pode ser aceitável se você precisar oferecer suporte ao Internet Explorer 11. Se você estiver segmentando apenas navegadores modernos, usar apenas o WOFF 2.0 é a opção mais simples e com melhor desempenho.
  • Crie um subconjunto dos recursos de fonte: várias fontes permitem a criação de subconjuntos ou a divisão em vários intervalos Unicode para fornecer apenas os glifos necessários para uma determinada página. Isso reduz o tamanho do arquivo e melhora a velocidade de download do recurso. No entanto, ao definir os subconjuntos, tenha o cuidado de otimizar considerando a reutilização de fontes. Por exemplo, não faça o download de um conjunto de caracteres diferente, mas com caracteres iguais em cada página. Uma boa prática é criar um subconjunto de acordo com o sistema de escrita: por exemplo, latino e cirílico.
  • Dê preferência a local() na lista src: listar local('Font Name') primeiro na lista src garante que as solicitações HTTP não sejam feitas para fontes que já estão instaladas.
  • Use o Lighthouse para testar a compactação de texto.

Efeitos na maior exibição de conteúdo (LCP) e no deslocamento cumulativo do layout (CLS)

Dependendo do conteúdo da página, os nós de texto podem ser considerados candidatos para a Largest Contentful Paint (LCP). Portanto, é essencial seguir os conselhos deste artigo para garantir que as fontes da Web sejam o mais pequenas possível, para que os usuários possam ler o texto da página o mais rápido possível.

Se você acha que, apesar dos seus esforços de otimização, o texto da página pode demorar muito para aparecer devido ao grande recurso de fontes da Web, a propriedade font-display tem diversas configurações que podem ajudar a evitar texto invisível durante o download de uma fonte. No entanto, usar o valor swap pode causar mudanças de layout significativas que afetam a Cumulative Layout Shift (CLS, na sigla em inglês) do site. Use os valores optional ou fallback, se possível.

Se as fontes da Web forem essenciais para sua marca e, por extensão, para a experiência do usuário, considere pré-carregá-las para que o navegador tenha uma vantagem na solicitação delas. Isso pode reduzir o período de troca se você usar font-display: swap ou o período de bloqueio se você não estiver usando font-display.