Fontes

Introdução

Fontes são largamente utilizadas em páginas web para transmitir informações e impacto sobre o tema abordado. Uma boa fonte pode fazer a diferença entre uma página de sucesso ou fracasso.

Do mesmo como que são muito importantes para o contexto da aplicação, elas precisam de cuidados para proverem o melhor do seu potencial.

Tipos de fontes

Existe dois modos de usar fontes em páginas web: usando fontes de sistemas ou carregando fontes externas com o site.

Fontes do sistema, como o próprio nome sugere, diz respeito as fontes que já vem instaladas por padrão no sistema operacional do usuário. Essas fontes não rapidamente utilizadas pelo site, pois estão armazenadas localmente no dispositivo e não precisam ser baixadas.

Fontes externas são fornecidas pelo próprio site ou aplicação e cada vez que o usuário precisa acessar o site ele deverá realizar o download da fonte para poder ver corretamente o conteúdo.

Carregamento de fontes

O carregamento das fontes pelos navegadores não é uniforme, ou seja, cada navegador adota uma técnica padrão para fazer o carregamento das fontes. Veja a tabela abaixo:

Navegador	Comportamento padrão
Chrome	Esconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta e então faz a troca.
Firefox	Esconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta e então faz a troca.
Edge	Usa uma fonte do sistema até que a fonte esteja pronta e então faz a troca.
Safari	Oculta o texto até que a fonte esteja pronta.

Entretanto esse comportamento pode ser alterando utilizando a propriedade css font-display. Vale a pena prestar atenção nele pois ele pode impactar o LCP, FCP e a estabilidade do layout.

Uma fonte deve ser carregada usando utilizando a propriedade css @font-face, mas ela por si só não aciona o download da fonte. Para isso acontecer é necessário que que algum elemento do CSS que use ela esteja presente na página.

Melhores práticas

Entrega da fonte

Se estiver utilizando uma fonte externa, o melhor é usar uma CDN (Content Delivery Network) para otimizar a entrega da fonte e o carregamento pelo site. O Google disponibiliza o Google Fontes, acervo com dezenas de fontes gratuitas que podem ser utilizadas por qualquer aplicação.

Ela pode então ser carregada usado uma tag HTML link ou através da declaração @import . De preferência por usar a tag HTML link pois poderá realizar o pré carregamento dela e ter portanto uma entrega mais rápida.

Formato da fonte

Sempre que possível use o formato .woff2 para suas fontes. O formato é amplamente suportado atualmente nos navegadores modernos e por usar um algoritmo de compressão mais eficiente, é 30% menor do que o formato .woff.

Pré-carregamento da fonte

Utilizando o atributo rel="preload" é possível indicar para o navegador que ele deve pré conectar os servidor indicado e pré carregar o recurso pois ele será usado em algum momento pela página. Isso agiliza a comunicação inicial desses servidores, permitindo que a entrega do recurso seja mais rápida.

Exemplo

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" as="style" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" />

Comportamento de carregamento

Como dito acima os navegadores não carregam as fontes de maneira uniforme. Por isso devemos utilizar a propriedade font-display para normalizar esse comportamento e melhorar a experiência.

A melhor prática, e amplamente recomendada pelo Google é usar o font-display: swap, indicando que a renderização será bloqueada por um período de tempo extremamente curto e depois irá utilizar uma fonte similar até que a fonte solicitada tenha sido carregada.

Isso garante que mesmo que o usuários esteja em uma conexão lenta, o texto se mantenha visível mesmo que a fonte não tenha sido carregada, permitindo a visualização das informações.

Exemplo

<style>
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 100;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.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;
    }
</style>

Verificar disponibilidade local

Ao utilizar a função local() do css é possível especificar que o navegador deve verificar primeiramente verificar se o usuário já possui a fonte baixada e então usá-la, ou então baixá-la do servidor. Isso garante otimiza o carregamento dos recursos, pois uma requisição desnecessária não será disparada.

Exemplo

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

Carregamento inline

Não carregue fontes embutindo o código fonte delas diretamente na página HTML. Isso poderá gerar erros de renderização das fontes, atrasar o carregamento das páginas e inviabilizar o uso do cache do navegador para a fonte.