Como otimizar as fontes do seu site para PageSpeed e UX

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Se você tem um site e gosta de seguir as diretrizes do Google para conseguir 100 pontos no PageSpeed ou oferecer uma boa experiência para seus usuários (User Experience - UX), vários pontos podem ser otimizados e um dos principais é a escolha e carregamento das fontes.

O PageSpeed é um serviço online e gratuito do Google para fazer auditoria em sites analisando diversos pontos de desempenho, melhores práticas, acessibilidade e experiência do usuário. As fontes são recursos importantes que podem afetar diretamente a pontuação na avaliação.

Os web designers sempre buscam aplicar fontes com letras bonitas em um site e isso não é ruim, o importante é chegar no equilíbrio entre visual, conforto de leitura e desempenho. Vamos ver alguns pontos neste guia que vão te ajudar na escolha das melhores fontes.

Antes de começar um trabalho de otimização, tenha em mente: "menos é mais". Comece se perguntando se é necessário mesmo utilizar tudo que está sendo utilizado e depois elimine o máximo que conseguir de recursos. O seu site precisa de 10 fontes diferentes? Quantos KBs elas carregam? Pense nisso!

▶ Se preferir, acesse "Como otimizar as fontes do seu site para PageSpeed e UX" no YouTube.

Vamos ver agora como fazer a verificação das fontes atuais do seu site (espero que não tenha 10) e depois analisar as melhores opções, seus tipos, vantagens e desvantagens, dicas de otimização e muito mais.

Como verificar as fontes do seu site

A primeira tarefa importante na otimização de fontes é verificar quais são utilizadas atualmente no seu site para renderizar as letras e possíveis ícones, e também quais são carregadas pelo navegador.

O objetivo é identificar possíveis excessos na quantidade de fontes e também no total de KBs necessários para download desse recursos, além da falta de otimização.

Verificando as fontes utilizadas na renderização

Uma maneira de descobrir os nomes das fontes que seu site utiliza para renderizar as letras é através do DevTools (ferramentas de desenvolvedor) do navegador, seguindo os passos a seguir:

• Clique com o botão direito sobre o texto ou ícone
• Selecione "Inspecionar"
• Clique em Styles (Estilos)
• Procure pelas regras CSS font ou font-family
• Verifique as fontes marcando ou não a aplicação

O exemplo a seguir utiliza a fonte Verdana em todos os subtítulos H2, com a fonte Arial de fallback.

h2{
font-family:
	Verdana,Arial;
}

Uma outra maneira de descobrir as fontes é utilizando extensões que rodam no navegador. Se você utiliza o Chrome, acesse a Chrome Store e procure por "font scanner". Uma ótima opção é a extensão WhatFont. Com ela instalada e habilitada, basta clicar sobre o texto que você quer verificar.

Importante destacar que os ícones de um site, quando existem, podem estar presentes dentro de fontes. Sendo assim, faça a verificação de ícones da mesma forma que se faz com os textos.

Verificando o carregamento de fontes

Em alguns casos as fontes que o site utiliza já estão instaladas no dispositivo do usuário e assim o navegador não precisa fazer o download, isso é bom para o desempenho.

Já em outros casos, as fontes que o site utiliza são personalizadas e o navegador precisa fazer o download. Esse processo de download pode ser crítico para o desempenho, por isso é fundamental analisar quais estão sendo carregadas e qual o tamanho geral.

Uma maneira simples de verificar as fontes que seu site carrega é utilizando o DevTools (ferramentas de desenvolvedor) do navegador. No Chrome você pode fazer CTRL + SHIFT + I para abrir a ferramenta. Depois clique na aba Rede (Network) e recarregue a página com F5 ou CTRL + R. Você também pode verificar clicando na aba Application > Frames > Fonts.

A imagem a seguir mostra um exemplo de site que carrega a fonte Roboto através de 3 arquivos WOFF2 (Formato aberto de fonte para a Web).

Você também pode verificar o tamanho de cada carregamento, ordem e os tempos. Repare também que os nomes de arquivos WOFF2 não são os mesmos nomes das fontes que eles carregam, no caso Roboto.

Para descobrir o nome da fonte que um arquivo WOFF2 ou outro formato carrega, faça o download do arquivo e suba em um site como o https://wakamaifondue.com. A ferramenta vai analisar o arquivo e retornar o nome da fonte relacionada.

Um ponto de atenção em usar o próprio navegador para verificar as fontes carregadas é que, caso a fonte personalizada esteja instalada no computador, ela não aparecerá na lista, pois não será necessário o download, então nesse caso o mais indicado é usar um serviço online, como o Google PageSpeed.

Você pode acompanhar a quantidade de fontes carregadas e o tamanho total delas em "Recursos, solicitações e transferências". Você também pode verificar a presença das fontes em "Solicitações Críticas", pois são fundamentais para a renderização das páginas.

Fontes nativas do sistema

Uma fonte nativa é aquela que já está instalada no dispositivo do usuário e é usada como padrão pelo sistema operacional. Isso quer dizer que, se você configurar seu site para usar essas fontes, ele terá um desempenho melhor neste quesito, pois não será necessário fazer o download da que for utilizada.

As principais fontes nativas são:

• -apple-system (Safari para macOS e iOS (Fonte San Francisco))
• BlinkMacSystemFont (Chrome menor que v.56 para macOS (San Francisco))
• Segoe UI (Windows)
• Roboto (Android)
• Helvetica Neue e Arial (Fontes básicas de fallback)
• Noto Sans (Linux)
• sans-serif (Fontes Sans serif de fallback)
• Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji (Emoji)

Na prática será utilizada a primeira fonte detectada no dispositivo. Por exemplo, se o usuário acessar o site com um iPhone, será utilizada a fonte San Francisco. Se ele acessar com um celular Android, será usada a Roboto. Temos também as fontes Helvetica e Arial de fallback para compatibilidade com dispositivos mais antigos, entre outras possibilidades.

Coloque o código CSS a seguir no seu site para aplicar a lista de fontes nativas.

body{
font-family:
	-apple-system,
	BlinkMacSystemFont,
	"Segoe UI",
	Roboto,
	"Helvetica Neue",Arial,
	"Noto Sans",
	sans-serif,
	"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

Se você utiliza alguma biblioteca front-end (ex: Bootstrap) com configuração padrão para criar seus sites, são grandes as chances de estar utilizando fontes nativas da forma apresentada.

Fontes seguras da web

As fontes seguras da web (Web Safe Fonts) são as que já estão instaladas por padrão na maioria dos dispositivos. Por exemplo, a fonte Arial tem mais de 95% de compatibilidade com Windows e Mac OS, então se for utilizar essa fonte no seu site, não é necessário fazer o download, apenas definir a regra no CSS.

body{
font-family:
	Arial;
}

Algumas das fontes web seguras (Web Safe Fonts) mais comuns são:

• Arial
• Times New Roman
• Helvetica
• Trebuchet MS
• Courier New
• Verdana
• Tahoma
• Arial Narrow
• Calibri

A vantagem de usar fontes seguras é o desempenho, pois assim como as fontes nativas, não é necessário fazer download. A desvantagem é que são fontes simples e os web designers não gostam muito.

Fontes de ícones

Uma fonte de ícone é aquela que possui alguns desenhos simples para usar em partes do site, normalmente em links, botões e caixas de alerta. Um dos serviços mais famosos que oferecem esse recurso é o Font Awesome.

A desvantagem de usar uma fonte de ícone é que muitos KB devem ser carregados para que tudo funcione bem. No caso do Font Awesome com fonte de ícones, pelo menos 200KB são carregados.

Ao fazer o download do pacote, você verá que são diversos arquivos e pastas, e uma dessas pastas é exclusiva para armazenar as fontes. Para usar um ícone e só seguir duas etapas:

No HTML você deve carregar o arquivo CSS geral:

<link href="css/all.css" rel="stylesheet">

Depois inserir o ícone na parte desejada da página usando o código HTML a seguir:

<i class="fas fa-user"></i>

Para otimizar a utilização de ícones no seu site, o primeiro ponto é analisar a possibilidade de remover boa parte deles, pois em muitos casos são utilizados apenas como enfeites.

Caso não seja possível remover pensando no layout, você pode trocar uma fonte de ícones por imagens SVG, Símbolos HTML ou Emojis, todos bem mais leves para o desempenho da página, pois são criados com códigos interpretados diretamente pelo navegador, sem uso de fontes e arquivos CSS.

<svg aria-hidden="true" data-prefix="fas" data-icon="graduation-cap" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-graduation-cap fa-w-20"><path fill="currentColor" d="M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z" class=""></path></svg>

⚡

⚡

🌞

🌞

A desvantagem dos símbolos HTML e Emojis é que a renderização do ícone pode variar de acordo com o dispositivo usado para acessar o site, então é necessário testar os melhores para cada caso. Você pode encontrar uma referência completa no site w3schools.com.

Sobre os códigos SVG, existem diversas ferramentas na internet que geram esse tipo de arquivo ou que já disponibilizam uma biblioteca com ícones para baixar. O próprio Font Awesome também permite a utilização de SVG no lugar da fonte de ícones.

Assim que fizer a troca para esses formatos mais leves, não esqueça de remover as chamadas no código CSS das fontes de ícones que eram utilizadas no seu site. Confira ainda neste guia como identificar todas as fontes que são carregadas pelo seu site.

Fontes Personalizadas Comuns

Uma fonte personalizada é aquela que não é segura, não é nativa, mas que normalmente é mais bonita e que pode ser carregada em qualquer dispositivo. Sendo assim, se um usuário acessar seu site com iPhone ou celular com Android, a mesma fonte personalizada será renderizada.

A desvantagem é o desempenho, pois elas não existem no dispositivo do usuário, então o site precisa carregar esses KBs extras. A regra geral é: use com moderação!

Por exemplo, o meu site utiliza (por enquanto) a fonte Roboto do Android em três pesos (400, 700 e 900), e está configurado para baixar e renderizar em qualquer dispositivo. São arquivos WOFF2 que podem ser carregados pelo Google Fonts usando a tag HTML LINK no código do site.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">

Repare que é um link para um arquivo CSS e temos parâmetros definindo as variações das fontes que devem ser disponibilizadas: 400, 700 e 900. Se você carregar esse link numa aba do navegador, verá que para cada variação de peso e caractere existe uma chamada, como a do exemplo a seguir:

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.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;
}

Inclusive você pode chamar as fontes com o código anterior diretamente no CSS do seu site, sem precisar usar a tag HTML LINK. Sendo assim, para o meu caso, posso colocar mais duas chamadas para os outros dois pesos, e ainda considerando somente os caracteres em Latin, totalizando três configurações.

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.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;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.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;
}

Vale destacar que as chamadas da forma anterior ou com a tag HTML LINK criam apenas as referências para as fontes. Elas só serão realmente carregadas quando forem utilizadas com CSS por alguma parte do site ou se forem pré-carregadas, como veremos ainda neste guia.

O exemplo a seguir aplica a fonte Roboto nos títulos do site com o peso 700, e com isso o arquivo KFOlCnqEu92Fr1MmWUlfBBc4.woff2 será carregado.

h1{
	font-family:Roboto,Arial,Helvetica,sans-serif;
	font-weight:700;
}

Se numa mesma página eu utilizar as 3 variações de pesos da fonte, 3 arquivos WOFF2 serão carregados e isso pode ser um problema para o desempenho de um site, já para outros não, então tudo depende do contexto, pois as fontes são apenas 1 dos diversos fatores da otimização.

Outro ponto importante nos códigos apresentados é que as fontes são carregadas da CDN do Google, ou seja, em computadores espalhados pelo mundo. Isso é bom para o desempenho, pois sempre serão carregadas do servidor mais próximo do usuário.

Se você quiser, pode baixar essas fontes e deixar no seu próprio servidor para usar com outro serviço de CDN, como a Cloudflare, por exemplo.

Fontes Personalizadas Variáveis

As fontes variáveis são como as fontes personalizadas, mas com a vantagem de ter um range de pesos variável e todos em um mesmo arquivo.

Na prática quer dizer que você pode usar pesos variáveis, por exemplo: 125, 254, 677, 988, ou seja, um range de 1 - 900 neste caso. Você tem liberdade pra escolher qual quer usar em cada elemento no site.

Uma das principais vantagens das fontes variáveis é o desempenho, pois como vimos, seu site pode carregar apenas um arquivo de fonte com vários pesos.

A desvantagem no momento é que não temos muitas fontes variáveis disponíveis, pois é um recurso relativamente novo, então cabe ao web designer analisar as possibilidades e colocar tudo na balança.

No Google Fonts temos algumas fontes variáveis e uma delas é a Inter:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;900&display=swap" rel="stylesheet">

Repare que foram escolhidas as variações 100 e 900, mas como é uma fonte variável, na verdade foi criado um range de pesos e no CSS do site é possível utilizar qualquer valor dentro desse range com font-variation-settings, como no exemplo a seguir:

h1{
	font-family:'Inter', sans-serif;
	font-variation-settings: 'wght' 850;
}

Como visto nas fontes personalizadas comuns, você também abrir o link Google Fonts da fonte Inter numa aba do navegador, copiar os códigos e colocar direto no CSS do site.

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/inter/v2/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.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;
}

No exemplo anterior foi configurado apenas um arquivo em Latin para todos os ranges.

Personalizar o atraso na renderização de texto

Se o seu site está configurado para usar uma fonte Personalizada, são grandes as chances dela não estar instalada no dispositivo do usuário, então nesse caso é feito o download.

Mas enquanto a fonte não é carregada, o que acontece? Você já deve ter reparado isso em alguns sites. A primeira opção é ficar um espaço em branco no lugar do texto. Já a segunda opção é o texto aparecer com uma fonte padrão do dispositivo e depois ser trocada pela personalizada.

Esse é um dos itens que o Google PageSpeed verifica. Você já fez a auditoria no seu site e recebeu o alerta: "Garanta que o texto continue visível durante o carregamento"? É relacionado com isso.

Você pode configurar esse comportamento enquanto a fonte personalizada não é carregada usando font-display: swap;. Se você analisar os códigos apresentados aqui neste post, todos usam o valor swap.

As configurações que você poderá fazer são baseadas no período de bloqueio da fonte e também no período de troca. O primero define o tempo que a fonte ficará bloqueada aguardando o seu carregamento e durante esse tempo um "texto invisível" será colocado no lugar, ou uma fonte qualquer. Já o segundo define o tempo de troca dos estados citados anteriormente para a fonte que deve ser utilizada.

Os valores a seguir podem ser usados para configurar os períodos de bloqueio e troca das fontes:

O valor swap garante um período de bloqueio de zero segundo e um tempo de troca infinito, ou seja, o navegador desenha o texto imediatamente com uma fonte fallback, caso a fonte desejada não tenha sido carregada, e faz a troca assim que possível.

O valor swap é ótimo para garantir que o texto fique visível de uma forma rápida, mas pode influenciar negativamente na métrica CLS (Cumulative Layout Shift). Essa é uma métrica vital da web que o Google utiliza para analisar a estabilidade visual da página, então é importante fazer testes.

O valor block trabalha com um curto período de bloqueio, até 3 segundos, e um tempo de troca infinito. Ele coloca um texto "invisível" no lugar da fonte até que ela seja carregada. Utilize esse valor quando a fonte configurada for necessária para a usabilidade.

Já o valor fallback trabalha com um tempo de bloqueio extremamente pequeno, algo em torno de 100 ms, e um curto período de troca. Enquanto a fonte não é carregada, uma fallback será utilizada, e se passar muito tempo sem o download da principal, essa fonte fallback ficará como definitiva.

Por último, o valor optional trabalha com período de bloqueio na faixa de 100 ms e 0 de troca. Na prática é como dizer para o navegador que o carregamento da fonte personalizada é algo opcional, então fica ao navegador a missão de decidir.

Pré-carregamento de fontes

As Fontes são consideradas "Solicitações Críticas" para o PageSpeed, ou seja, com importância alta no layout final da página e prioridade no carregamento.

Se o seu site tem muitos recursos críticos, isso pode afetar diretamente o desempenho das páginas. É importante avaliar quais são esses recursos, eliminar, reduzir, carregar de forma assíncrona ou adiar o carregamento, se necessário.

No caso das fontes, caso seu site utilize muitas e que não podem ser excluídas (essa é sempre a melhor opção), você pode fazer um pré-carregamento das que são mais importantes para a página.

O pré-carregamento das fontes ativará uma solicitação no início do caminho crítico, antecipando o carregamento, sem ter que esperar a renderização da árvore de elementos. Para isso, adicione o atributo rel="preload" na tag LINK.

<link rel="preload" href="https://fonts.gstatic.com/s/inter/v2/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2" as="font" type="font/woff2" crossorigin>

No exemplo anterior foi pré-carregado o arquivo da fonte variável que utilizamos anteriormente neste post. As duas imagens a seguir mostram a fonte carregada normalmente e com pré-carregamento, respectivamente.

Com o pré-carregamento a fonte ganha prioridade na lista de recursos que devem ser carregado. No exemplo apresentado ela saiu do último lugar para o segundo.

O único cuidado que você deve ter é não utilizar o pré-carregamento em recursos que não são críticos e que não serão utilizados para a renderização dos elementos principais da página (acima da borda), pois isso pode gerar cargas desnecessárias.

Compatibilidade e tipos de fontes

Em todos os exemplos apresentandos o tipo de arquivo WOFF2 foi utilizado. Ele é o mais moderno e leve, comparado com formatos mais antigos como WOFF, EOT e TTF.

As fontes variáves podem utilizar arquivos WOFF2 e como vimos aqui, elas também utilizam regras novas de CSS, no caso a font-variation-settings: 'wght' 850.

E a compatibilidade com dispositivos mais antigos? Você pode verificar os navegadores que suportam o recurso que deseja usar no seu site, basta acessar caniuse.com e pesquisar, por exemplo, por WOFF2.

E outro ponto importante é que sempre é possível criar regras no seu código para dispositivos e navegadores mais antigos. Por exemplo, você pode configurar diversos tipos de arquivos para a mesma fonte, assim o navegador carrega a melhor opção.

@font-face {
	font-family: 'Awesome Font';
	font-style: normal;
	font-weight: 400;
	src: local('Awesome Font'),
		url('/fonts/awesome-l.woff2') format('woff2'),
		url('/fonts/awesome-l.woff') format('woff'),
		url('/fonts/awesome-l.ttf') format('truetype'),
		url('/fonts/awesome-l.eot') format('embedded-opentype');
}

Já para o caso das fontes variáveis, você pode fazer uma chamada para uma fonte normal e verificar a compatibilidade com as variáveis, e caso exista, oferecer esse recurso.

html { font-family: 'Inter', sans-serif; }
	@supports (font-variation-settings: normal) {
		html { font-family: 'Inter variavel', sans-serif;
	}
}

Se você quiser entender melhor os recursos apresentados, analisando mais detalhes de implementação e exemplos, acesse o post "Otimização de Webfonts" do Ilya Grigorik no site developers.google.com.