CSS @font-face

@font-face é a regra CSS que informa ao navegador onde encontrar um arquivo de fonte e como nomeá-la. Foi suportada pela primeira vez no IE 4 em 1997, mas só se tornou prática em todos os navegadores por volta de 2010, quando o WOFF chegou e outros navegadores implementaram a regra de forma consistente.

Para fontes de ícone, @font-face é a ligação entre seus arquivos de fonte e as classes CSS que exibem os ícones. Sem ela, o navegador não tem como saber que font-family: 'MyIcons' deve carregar um arquivo específico do seu servidor.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

O descritor font-family dá um nome à fonte que você referenciará posteriormente. O descritor src informa ao navegador onde baixar o arquivo e em que formato está. Os descritores font-weight e font-style garantem que o navegador não tente sintetizar variantes em negrito ou itálico. E font-display controla o que acontece enquanto a fonte está carregando.

A dica format() após cada URL informa ao navegador em qual formato o arquivo está, para que ele possa ignorar os formatos não suportados sem baixá-los primeiro. Ao longo dos anos, o conjunto recomendado de formatos foi reduzido drasticamente à medida que o suporte de navegadores melhorou.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Com mais de 97% de cobertura de navegadores, somente WOFF2 é suficiente para a grande maioria dos projetos modernos. Esta é a abordagem mais simples e com melhor desempenho.

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

Adicionar WOFF como fallback cobre o IE 11, que não suporta WOFF2. Os navegadores modernos carregarão o arquivo WOFF2; o IE 11 recorre ao WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

A pilha "à prova de balas" completa inclui EOT para IE 6-8, WOFF2 para navegadores modernos, WOFF para IE 9-11 e TTF como fallback final. O navegador tenta cada entrada src em ordem e usa o primeiro formato que entende. Essa abordagem só é necessária para projetos com requisitos legados extremos.

O padrão padrão para fontes de ícone usa uma classe base que define a família de fontes e os estilos de renderização compartilhados, depois classes de ícone individuais que usam pseudo-elementos ::before com content definido para o ponto de código Unicode de cada ícone.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

A classe base redefine o estilo da fonte para evitar que o navegador aplique negrito, itálico ou outras transformações que distorceriam os ícones. As propriedades -webkit-font-smoothing e -moz-osx-font-smoothing ativam o antialiasing para renderização mais nítida no macOS e iOS.

Cada classe de ícone define um pseudo-elemento ::before com o ponto de código Unicode atribuído a esse glifo. A notação com barra invertida-E (\E001) é a forma do CSS de referenciar um caractere Unicode pelo seu ponto de código hexadecimal.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Tanto <i> quanto <span> funcionam igualmente bem. O elemento em si fica vazio — o ícone é renderizado inteiramente pelo pseudo-elemento ::before.

O descritor font-display controla o que o navegador mostra enquanto o arquivo de fonte ainda está sendo baixado. Isso é crítico para fontes de ícone porque a configuração errada pode tornar os ícones invisíveis durante o carregamento da página.

Para fontes de ícone, swap é a escolha recomendada. Um breve flash de conteúdo sem estilo (onde os pontos de código de ícone podem aparecer como quadrados ou espaços em branco) é muito melhor do que ícones invisíveis. Com block, os usuários poderiam ver espaço vazio onde os ícones deveriam estar por até 3 segundos em conexões lentas — o que parece uma página quebrada. Com swap, os ícones aparecem assim que a fonte carrega, e a transição geralmente é imperceptível em conexões modernas.

Os arquivos de fonte bloqueiam a renderização por padrão — o navegador não vai renderizar texto usando uma fonte personalizada até que o arquivo seja baixado. Aqui estão técnicas para minimizar o impacto:

• Pré-carregue o arquivo de fonte — use <link rel="preload"> para iniciar o download da fonte o mais cedo possível, antes mesmo que o navegador analise o CSS que a referencia.
• Hospede suas fontes localmente — servir arquivos de fonte da mesma origem que seu HTML evita consultas DNS extras e configuração de conexão, e elimina problemas de CORS.
• Subconjunto de sua fonte — remova ícones não utilizados para reduzir o tamanho do arquivo. Uma fonte com 500 ícones onde você usa apenas 50 está desperdiçando 90% do download.
• Use unicode-range — se você tiver múltiplos conjuntos de ícones, esse descritor instrui o navegador a baixar o arquivo de fonte apenas quando caracteres no intervalo especificado forem realmente usados na página.

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

O atributo crossorigin é necessário mesmo para fontes de mesma origem — esta é uma peculiaridade da especificação de carregamento de fonte. Sem ele, o navegador baixará a fonte duas vezes: uma vez a partir da dica de pré-carregamento (sem CORS) e uma vez a partir da regra @font-face (com CORS).

• Erros CORS — Arquivos de fonte servidos de uma origem diferente (por exemplo, um subdomínio CDN) precisam de cabeçalhos Access-Control-Allow-Origin no servidor. Como alternativa, use o atributo crossorigin na tag <link>. Sem a configuração adequada de CORS, o navegador bloqueará silenciosamente a fonte.
• Ícones exibindo quadrados ou retângulos — Isso geralmente significa que o caminho do arquivo de fonte está errado, a fonte ainda não foi carregada ou o nome font-family na classe do ícone não corresponde ao nome na declaração @font-face. Verifique a aba Rede do seu navegador para confirmar que o arquivo de fonte foi carregado com status 200.
• Ícones exibindo glifos errados — Conflitos de ponto de código Unicode com fontes do sistema. Se sua fonte de ícone usa pontos de código em intervalos que se sobrepõem a fontes comuns do sistema, o navegador pode renderizar um caractere do sistema em vez disso. As fontes de ícone geralmente usam a Área de Uso Privado (U+E000 a U+F8FF) para evitar isso.