Como otimizar o carregamento de web fonts

Sequência de letras A em fontes e tamanhos diferentes — Raidboxes/Reprodução

As fontes personalizadas, também conhecidas como web fonts, podem ser usadas para criar uma identidade visual marcante, melhorar a aparência de um site e torná-lo mais legível. No entanto, a incorporação de web fonts pode aumentar significativamente o tempo de carregamento da página e afetar negativamente a experiência do usuário. Por isso, a otimização do carregamento fontes é crucial para garantir que os visitantes do site tenham uma experiência agradável e eficiente.

Neste artigo, exploraremos cinco métodos essenciais para otimizar o carregamento de web fonts, incluindo a seleção de caracteres de fontes, o uso de formatos modernos e o pré-carregamento. Ao implementar essas técnicas, os designers e desenvolvedores podem garantir que os sites carreguem rapidamente.

Use formatos de arquivo mais modernos

O formato de arquivo de fonte para web mais leve e eficiente atualmente é o Web Open Font Format 2.0 (WOFF2). Ao utilizar a regra @font-face em seu CSS, certifique-se de que a fonte WOFF2 apareça antes de formatos de arquivo mais antigos e menos eficientes, como o TTF. O navegador usará a primeira fonte na lista, mesmo que seja um arquivo maior.

@font-face { 
    font-family: 'Roboto'; 
    src: url('roboto.woff2') format('woff2'),
         url('roboto.woff') format('woff'); 
}

A menos que você precise dar suporte ao Internet Explorer 8, você não precisa de outros formatos a não ser WOFF2 e WOFF. Do Internet Explorar 11 ou mais recente, somente o WOFF2 é necessário.

Se você só tiver um arquivo TTF, precisará convertê-lo usando uma ferramenta como a Font Converter. Se não estiver utilizando uma fonte com uma licença totalmente de código aberto, verifique primeiro se a licença permite isso.

Pré-carregue os arquivos de fontes

Para minimizar o FOIT/FOUT, é ideal carregar as web fonts o mais rápido possível. Usando o elemento <link rel="preload"> em nosso cabeçalho HTML, podemos dizer ao navegador para começar a baixar nossas fontes mais cedo. Adicione a seguinte tag no início do seu <head>, definindo o atributo href como a URL do arquivo da web font:

<link rel="preload" href="/roboto.woff2" as="font" type="font/woff2" crossorigin>

Ao adicionar essa tag, você está dizendo ao navegador para começar a carregar o arquivo de fonte imediatamente, enquanto normalmente ele não começaria até encontrar uma referência à fonte específica em seu CSS.

Os navegadores atuais são inteligentes o suficiente para baixar fontes apenas se forem necessárias na página que está sendo visitada. O uso do preload substitui esse comportamento, forçando o navegador a baixar uma fonte mesmo que ela não seja usada. Por esse motivo, apenas pré-carregue um único formato de cada fonte – dê preferência ao WOFF2.

Quanto mais fontes você pré-carregar, menos benefício obterá com essa técnica, portanto, dê prioridade às fontes que aparecem “acima da dobra” – a parte do corpo da página que fica visível antes do visitante começar a rolá-la.

Use font-display

Existem duas siglas que você verá com frequência relacionadas ao carregamento de fontes:

Flash of Invisible Text (FOIT): é o período de tempo em que o texto fica invisível antes que o navegador tenha baixado uma web font.
Flash of Unstyled Text (FOUT): é o período de tempo em que o texto é renderizado em uma fonte substituta antes que o navegador tenha baixado uma web font.

Nenhum dos dois é ideal, mas se você estiver usando web fonts, um deles provavelmente acontecerá na primeira vez que um usuário visitar seu site – da segunda visita em diante, o navegador deve usar as fontes do cache. Se pegarmos a regra @font-face que usamos antes e adicionarmos um descritor font-display, podemos dizer ao navegador qual preferimos.

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

Existem cinco valores possíveis para font-display: o primeiro, auto, é o comportamento padrão do navegador (a maioria dos navegadores prefere o FOIT). Aqui estão os outros quatro:

Swap

O valor swap diz ao navegador que queremos que ele mostre o texto usando uma fonte substituta até que a fonte da web seja carregada – forçando um FOUT. Independentemente de levar 5 segundos ou 5 minutos, assim que a fonte for carregada, ela será trocada. Isso é uma boa base porque permite que os visitantes do site comecem a ler o conteúdo imediatamente, mas certifique-se de escolher uma fonte substituta semelhante em dimensões de caracteres para evitar grandes mudanças de layout quando as fontes forem trocadas.

Block

Se preferir que o navegador oculte o texto até que a fonte da web seja carregada – forçando um FOIT –, pode usar font-display: block. O texto não permanecerá invisível para sempre, porém: se a fonte não for carregada dentro de um determinado período de alguns segundos, o navegador usará a fonte substituta de qualquer maneira, trocando para a web font assim que ela for carregada.

Lembre-se de que quando o texto está invisível, seu conteúdo não será legível e isso pode gerar frustração no visitante do site. Você já deve ter visto isso acontecer antes, quando acessou algum site e tinha grandes espaços vazios onde deveria ter texto e, de repente, todo os texto apareceu. Ele já estava lá, mas a fonte estava invisível até a web font ser carregada.

Fallback

O valor fallback é semelhante ao swap, mas com duas diferenças:

Ele começa com um período muito curto (~100ms) em que o texto é ocultado, após o qual mostra a fonte substituta.
Se a fonte da web não carregar dentro de um curto período de tempo (~3s), a fonte substituta continuará sendo usada na página.

Esta é uma boa escolha se não é crucial que o visitante veja o texto com a web font na primeira vez que visita o site – a fonte personalizada será carregada no cache e usada a partir da segunda visita.

Optional

O valor optional é semelhante ao fallback, mas dá à fonte um período extremamente curto de tempo (~100ms) para carregar, após o qual ela não será trocada. No entanto, ele tem uma característica adicional que permite ao navegador decidir abortar a solicitação da fonte se a conexão for muito lenta baixar a web font.

Vale lembrar que: cada fonte na sua página terá seu próprio período FOIT/FOUT – as fontes são trocadas individualmente à medida que são baixadas, não quando a última delas é baixada. Isso pode levar a alguns comportamentos indesejados, como textos piscando em momento diferentes e a diagramação mudar mais de uma vez durante o carregamento da página.

Configure subsets

Ao criar um subset para uma fonte, podemos gerar um novo arquivo de fonte menor que inclui apenas os glifos (um caractere ou símbolo especial) que precisamos – eliminando caracteres que são usando em alfabetos de outras línguas. Com a ferramenta Font Subsetter, é possível selecionar apenas caracteres do conjuntos “Basic Latin” e “Portuguese Diacritics”. Isso pode reduzir, em média, o tamanho de um arquivo WOFF2 – que já costumam ser pequenos — para menos da metade.

Criar subconjuntos é uma ferramenta poderosa, mas pode ter alguns possíveis desvantagens. Se você está construindo um site que exibe conteúdo gerado pelo usuário, nomes de pessoas ou de lugares, deve considerar caracteres além das 26 letras padrão, 10 números e pontuação comuns na escrita em Português. Se você criar subconjuntos de maneira muito agressiva, poderá acabar com uma mistura de fontes na mesma palavra. Imagine que um usuário faz um comentário e use uma palavra em Espanhol com a letra “ñ”, que é uma letra independente e não apenas um “n” com um til em cima. A tal palavra vai ter uma letra exibida com a fonte substituta, que pode ser destoante da fonte personalizada.

Felizmente, você não precisa verificar manualmente cada página em seu site em busca de diferentes glifos. Com o Glyphhanger, uma ferramenta de linha de comando que analisa suas páginas e determina os caracteres Unicode usados e cria um subset de um arquivo de fonte, é possível fazer uma nova versão da web font contendo apenas os caracteres especificados.

Assim como ao alterar formatos de arquivos, certifique-se de que a licença de sua fonte permita a criação de subsets.

Hospede suas fontes no seu servidor

Exatamente o que você acabou de ler. Hospede os arquivos de fontes dentro de um diretório do seu site, como os neandertais faziam.

Você pode ter ouvido que se um usuário já visitou um site que carrega as mesmas web fonts hospedadas na mesma fonte, o navegador não precisa baixá-las novamente porque elas estão em cache – então, se você usa uma fonte muito popular, como Roboto, o usuário que visitar o seu site e já tiver a Roboto no cache, baixada do Google Fonts por ter visitado anteriormente um outro site que também usa a mesma web font, seu site vai carregar mais rápido porque terá um arquivo a menos pra baixar.

Isso pode ter sido verdade há alguns tempo, mas não há evidências de que isso faça uma diferença significativa. Além disso, tanto o Firefox, quanto o Chrome e o Safari impedem o compartilhamento de recursos no cache entre diferentes URLs para barrar técnicas de rastreamento, como o fingerprinting, e proteger a privacidade do usuário.

Mas existem duas boas razões pelas quais você pode querer usar um serviço hospedado como Google Fonts ou Adobe Fonts:

Eles são frequentemente a maneira mais barata ou única forma legal de usar determinadas web fonts: Se você não tiver escolha a não ser usar um desses serviços, descubra se a fonte escolhida tem suporte para subsets ou font-display – o Google Fonts tem, para ambas.
Eles são convenientes: Copiar e colar uma linha de HTML na seção <head> do seu site será mais rápido do que a alternativa: baixar arquivos de fonte, converter e criar subsets de fontes e escrever regras @font-face para cada formatação e estilo.

Se você usa o Google Fonts apenas por conveniência, dê uma olhada no google-webfonts-helper. Essa ferramenta bem completa permite que você crie um pacote de web fonts personalizado a partir do conjunto completo de fontes do Google contendo o CSS e os arquivos de fonte de que você precisa.

Aqui está uma lista de boas razões para não usar fontes hospedadas por terceiros e hospedar as web fonts junto com os arquivos do seu site:

Desempenho

Resoluções de DNS levam tempo. Um tempo precioso que pode fazer o visitante desistir de abrir a página se ela demorar demais para carregar; você pode usar preconnect para tentar diminuir o problema, mas sempre haverá uma perda de desempenho ao abrir uma conexão TCP extra para um novo domínio. É por isso que até mesmo alguns sites do Google, como o web.dev, e a Play Store, usam fontes em diretórios dentro dos seus próprios servidores em vez de “chamar” o arquivo do Google Fonts.

Privacidade

Serviços de web fonts pagos, como o Adobe Fonts, fazer uma contagem de visualizações da página para calcular o faturamento, mas eles podem estar coletando mais dados do que necessário. Se você tiver alternativa, carregue suas fontes usando CSS, usando <link rel="stylesheet">, em vez de JavaScript (<script>), para minimizar a quantidade de dados que terceiros podem coletar dos seus visitantes.

O Google Fonts não parece coletar muito sobre os visitantes de quem usa suas web fonts além de endereços IP e o User Agent do navegador e sistema operacional, mas o Google sabe que não existe almoço grátis. Cada uma das mais de sessenta trilhões de requisições do Google Fonts a partir de visualizações de páginas, de acordo com o Analytics, é uma migalha de dados a mais que o Google tem em mãos graças a desenvolvedores preguiçosos.

Controle

Com fontes hospedadas em servidor próprio, você tem controle total sobre como carregar suas fontes, permitindo que você sirva subsets personalizados, defina configurações de exibição de fonte e especifique por quanto tempo o navegador deve armazenar em cache arquivos de fonte.

Serviços de terceiros podem sofrer lentidões, ficarem offline ou serem descontinuados. Ao hospedar suas fontes, desde que o seu site esteja funcionando corretamente, você não terá surpresas como layouts quebrados ou páginas lentas.

Cada um desses passos pode trazer benefícios por si só, mas podem trazer grandes melhorias se combinados. Se você decidir implementar alguns dos métodos abordados neste artigo, lembre-se de usar ferramentas como o Lighthouse ou o Web Page Test antes e depois de fazer as alterações e compare como cada mudança afeta o desempenho do seu site.