10 dicas para acelerar o carregamento de fontes
Com este tutorial, você será capaz de otimizar as web fonts e deixar seu site consideravelmente mais rápido.
Atualizado em
A tipografia é um dos principais elementos do design de sites e aplicativos. As fontes personalizadas são usadas por muitos sites modernos, especialmente por meio do Google Fonts, para acrescentar um toque exclusivo e aumentar a memorização da interface. No entanto, as fontes personalizadas podem ter um grande impacto no desempenho da página. Elas são geralmente pesadas, com centenas de kilobytes, e hospedadas em outro domínio, o que prejudica o tempo de carregamento da página. É possível, no entanto, otimizar o desempenho do carregamento de fontes da web.
Aqui estão dez dicas que podem ser utilizadas para melhorar o desempenho do carregamento de fontes personalizadas em um site. Com essas sugestões, é possível manter o estilo personalizado do site sem sacrificar a velocidade do carregamento de páginas. Usando essas dicas, você pode melhorar o SEO e aumentar o engajamento do usuário com o site, oferecendo uma experiência mais rápida e eficiente.
Como carregar fontes web mais rápido
1. Hospede as fontes no seu servidor
Quando você olha o código-fonte da maioria dos sites, geralmente vê um trecho do código assim:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"rel="stylesheet" />
Isso significa que o site está usando o diretório Google Fonts para carregar as fontes. O Google Fonts é excelente para prototipagem, pois é simples e rápido para testar diferentes modelos de fontes. Infelizmente, é terrível para o desempenho porque precisa de uma sequência complicada de solicitações para carregar uma fonte, o que adiciona uma latência significativa e prolonga o carregamento inicial.
Mas você pode reduzir o número de solicitações necessárias para apenas uma com uma solução bem simples: baixando a fonte, hospedando-a no mesmo servidor do seu site e colocando a declaração @font-face dentro do seu pacote CSS em vez de chamar uma folha de estilo de outro site.
Veja este exemplo de uma fonte hospedada dentro de um diretório /fonts:
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
src: url(../fonts/ibm-plex-sans.woff) format("woff2");
}
2. Use formatos modernos de fontes
As fontes web são como imagens pela forma como seus formatos funcionam. Com as imagens, formatos modernos como AVIF e WebP substituíram formatos menos compactados como PNG e JPEG. Da mesma forma, as fontes web possuem WOFF e WOFF2, que fornecem compressão superior aos formatos TrueType e OpenType (TTF e OTF). Além disso, as fontes web são quase universalmente suportadas:
Neste ponto, devido ao suporte quase universal do navegador, a melhor coisa a fazer é usar WOFF2 com fallback para WOFF, embora você possa até mesmo usar apenas WOFF2, já que cerca de 96% dos usuários usam navegadores modernos que suportam este formato.
3. Selecione apenas os caracteres necessários para o seu idioma
A seleção pode proporcionar uma diminuição significativa de tamanho sem ter nenhum inconveniente em como as fontes serão exibidas, desde que você não esteja usando os caracteres que removeu. A maneira mais simples de fazer isso é selecionar apenas os idiomas que você usa. Por exemplo, pegue a fonte Roboto, uma das fontes mais populares para textos longos. Se você incluir todos os idiomas, que incluem o alfabeto latino, cirílico, vietnamita e grego, o tamanho da fonte WOFF2 é de 104kb. No entanto, é provável que você não esteja usando todos esses idiomas. Se você remover todos os caracteres extra a manter apenas os utilizados no Português, o tamanho será reduzido para apenas 18kb! Existem muitas maneiras de selecionar caracteres de fontes, incluindo o Google Webfonts Helper, Everything Fonts e fontTools.
4. Use font-display
Por padrão, o texto não carregará em muitos navegadores até que a fonte correta seja baixada. Esse comportamento é chamado de “Flash de Texto Invisível” ou FOIT, na sigla em Inglês. Você já deve ter visto isso quando abre uma página e vários elementos são carregados, como imagens, botões e formulários, mas o texto é um grande espaço em branco até que… POW! Ele aparece do nada e ocupa o espaço vazio.
Felizmente, você pode personalizar o carregamento da fonte por meio da opção font-display em @font-face. Os dois valores recomendados para font-display são swap e optional. O swap usa uma fonte substituta (já presente no sistema) e, em seguida, alterna para a fonte personalizada assim que ela é baixada, e o optional atrasa o carregamento da página (por 100ms, no máximo) para permitir que a fonte carregue e, se não carregar, uma fonte substituta é usada até que isso aconteça. Vejo o exemplo abaixo:
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
src: url(../fonts/ibm-plex-sans.woff) format("woff2");
font-display: swap;
}
font-display: optional é o melhor quando você não precisa que a fonte seja carregada, pois impede qualquer mudança de layout e garante que o texto não fique invisível. No entanto, font-display: swap é melhor quando você precisa que a fonte seja carregada, pois substitui a fonte mesmo que leve mais de 100ms.
5. Combine sua fonte substituta com sua fonte personalizada
As fontes geralmente têm espaçamentos e tamanhos diferentes. Por exemplo, a fonte Merriweather é maior que a Georgia, mesmo que o tamanho da fonte CSS seja o mesmo. Essas inconsistências podem causar uma mudança de layout se você usar font-display: swap e tornar as fontes menos consistentes se você usar font-display: optional. Felizmente, você pode configurar sua fonte substituta para se parecer muito mais com a fonte web que está usando. A combinação de ambas as fontes pode ser feita personalizando o espaçamento e o tamanho da fonte para remover as inconsistências. Uma ferramenta útil para isso é o Font Style Matcher, que permite que você visualize duas fontes diferentes, configure várias propriedades de espaçamento e veja uma demonstração da mudança de layout.
6. Use um CDN
CDNs (Content Distribution Networks, em Inglês) são ótimos para acelerar a entrega de conteúdo estático. Os serviços de CDN tem servidores espelho em vários países e entregam o conteúdo do servidor que estiver mais próximo do usuário. Manter suas fontes em um CDN é uma boa ideia e também reduz os custos do servidor, já que os CDNs são geralmente mais baratos e evitam solicitações e transferências desnecessárias na sua hospedagem contratada.
7. Configure um cache
Caching é muito importante, especialmente se você tem muitos visitantes repetidos. O cache permite que a fonte seja carregada na máquina do visitante após o primeiro download. Você pode configurar um cache através do cabeçalho Cache-Control. Se você usa um CDN como o Cloudflare, é simples de fazer a partir do painel de configurações. Caso contrário, você pode fazer isso simplesmente editando o arquivo .htaccess, se a sua hospedagem permitir. Vejo um exemplo abaixo:
## CACHE ##
<IfModule mod_expires.c>
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|otf|eot|svg)$" >
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>
Você pode ainda compactar as fontes e melhorar um pouco mais o carregamento com o código a seguir:
## COMPRESSÃO ##
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/font-woff
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font-otf
</IfModule>
8. Pré-carregue suas fontes
Para evitar flash de texto, você pode pré-carregar as fontes web que são necessárias imediatamente. Adicione o elemento link para esta no cabeçalho do documento antes do fechamento </head>.
<link rel="preload" href="../fonts/ibm-plex-sans.woff2" as="font" type="font/woff2" crossorigin>
Os atributos as="font" type="font/woff2" dizem para o navegador baixar esse recurso como uma fonte e dar mais prioridade na fila de carregamento.
O atributo crossorigin indica se o recurso deve ser buscado com uma solicitação CORS, já que a fonte pode vir de um domínio diferente. Sem esse atributo, a fonte pré-carregada é ignorada pelo navegador. Com isso feito, ela é chamada mais cedo.
Com o pré-carregamento, o navegador sabe que precisa baixar esse arquivo mais cedo. É importante notar que, se não for usado corretamente, o pré-carregamento pode prejudicar o desempenho, fazendo solicitações desnecessárias para recursos que não são exibidos.
9. Use local()
Dependendo da fonte, o visitante do seu site já pode ter ela instalada no dispositivo. Existe uma forma de tirar proveito disso e buscar a fonte localmente em vez de carregá-la do seu servidor. Você pode fazer isso usando uma declaração local() na regra src do seu @font-face. Vai ficar assim:
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
src: local("IBM Plex Sans"),
url(../fonts/ibm-plex-sans.woff2) format("woff2");
font-display: swap;
}
Este @font-face verifica se o usuário tem a fonte localmente e, se não tiver, faz o download do arquivo no seu servidor. Isso deve acelerar o carregamento de quem já tem a fonte instalada, mas não vai prejudicar de nenhuma forma quem não tem. Você pode usar fontes que são instalada por padrão no sistemas operacionais mais populares, como Windows, MacOS e Android e tirar proveito disso — mas lembre-se que esses sistemas geralmente usam fontes proprietárias e que podem trazer complicações legais por causa do direito de uso. Pesquise a licença de distribuição de cada fontes antes de usá-la.
10. Não use fontes personalizadas
Eu sei que isso vai contra o que acabei de falar sobre licenças de distribuição, mas as fontes do sistema são ótimas para o texto de corpo do seu site. Apesar de ser a fonte da qual o usuário vai ter mais contato, pois é usada na parte mais extensa do conteúdo, a fonte do texto de corpo é a que tem menos impacto visual de todas que são usadas no site.
Sem falar que usar uma fonte muito estilizada para o texto, levando em conta o tamanho geralmente pequeno dos caracteres, pode atrapalhar na legibilidade do conteúdo. Se você tem um blog ou um site de notícias, use fontes personalizadas apenas pra a logo do site e os títulos, mas prefira usar fontes mais neutras para o texto.
Ao escolher font-family: system-ui;, as fontes usadas serão Segoe (Windows), San Francisco (MacOS e iOS) e Roboto (Android). Lembre-se de testar o seu layout em cada ambiente para evitar inconsistências visuais. Você pode usar máquinas virtuais ou ferramentas de testes cross browser para isso.