Otimizando Fontes da Web para Melhorar o Desempenho do Site

As fontes da web são essenciais para o design e a identidade visual de um site, mas se não forem otimizadas, podem impactar negativamente o desempenho. Vamos explorar como usar font-display, pré-carregar fontes e considerar fontes variáveis para garantir que seu site carregue rapidamente sem sacrificar a estética.

1. Usando font-display para Controlar o Carregamento de Fontes

A propriedade font-display permite controlar como as fontes são exibidas enquanto estão sendo carregadas. Isso evita problemas como "flash de texto invisível" (FOIT) ou "flash de texto não estilizado" (FOUT).

Sintaxe Básica

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap; /* Controla o comportamento de carregamento */
}

Valores de font-display

Exemplo Prático

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap; /* Exibe uma fonte alternativa enquanto a fonte personalizada carrega */
}

2. Pré-carregando Fontes Críticas

O pré-carregamento de fontes garante que elas sejam carregadas o mais cedo possível, melhorando o tempo de exibição do texto.

Sintaxe

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

Explicação

Exemplo Prático

<head>
  <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: 'MyFont';
      src: url('/fonts/myfont.woff2') format('woff2');
      font-display: swap;
    }
    body {
      font-family: 'MyFont', sans-serif;
    }
  </style>
</head>

3. Usando Fontes Variáveis

Fontes variáveis permitem armazenar múltiplos pesos e estilos em um único arquivo, reduzindo o número de solicitações HTTP.

Vantagens

Sintaxe

@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/myvariablefont.woff2') format('woff2-variations');
  font-weight: 100 900; /* Define a faixa de pesos suportados */
  font-stretch: 75% 125%; /* Define a faixa de largura suportada */
}

Exemplo Prático

@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/myvariablefont.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

body {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 400; /* Peso normal */
}

h1 {
  font-weight: 700; /* Peso bold */
}

4. Outras Dicas para Otimização de Fontes

a. Use Formatos Modernos

b. Limite o Número de Fontes

c. Subconjunto de Fontes

d. Hospede Fontes Localmente

Exemplo Completo

Aqui está um exemplo completo que combina todas as técnicas:

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Otimização de Fontes</title>
  <link rel="preload" href="/fonts/myvariablefont.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: 'MyVariableFont';
      src: url('/fonts/myvariablefont.woff2') format('woff2-variations');
      font-weight: 100 900;
      font-stretch: 75% 125%;
      font-display: swap;
    }
    body {
      font-family: 'MyVariableFont', sans-serif;
      font-weight: 400;
    }
    h1 {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h1>Olá, Mundo!</h1>
  <p>Este é um exemplo de otimização de fontes da web.</p>
</body>
</html>

Conclusão

Otimizar fontes da web é crucial para melhorar o desempenho do seu site. Use font-display para controlar o carregamento, pré-carregue fontes críticas e considere fontes variáveis para reduzir solicitações HTTP. Pequenas otimizações podem resultar em grandes ganhos de desempenho!