Técnicas de carregamento de fontes

Parece que a maioria dos sites usa fontes não padrão hoje em dia e quem pode culpá-los? As fontes do sistema são todas muito chatas e as fontes personalizadas acrescentam um pouco de brilho e frescor ao design de um site. O problema com o uso de fontes personalizadas, no entanto, é que elas podem deixar o carregamento do site muito lento. Os arquivos de fontes são grandes, podem exigir arquivos de fontes separados para negrito e itálico e podem bloquear a renderização se o desenvolvedor não contorná-los. Deixe-me mostrar ao senhor uma estratégia para carregar fontes mais rapidamente!

1. Colocar fontes na CDN

Uma solução simples para melhorar a velocidade do site é usar uma CDN, e isso não é diferente para as fontes. É importante garantir que a CDN tenha as configurações CORS adequadas, conforme discuti em Fontes de serviço da CDN:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
	add_header Access-Control-Allow-Origin *;
}

O senhor verá erros de AJAX/domínio cruzado no console se as configurações CORS da CDN não estiverem configuradas corretamente.

2. Use carregamento CSS sem bloqueio

Minha colega da Mozilla, Stephanie Hobson, compartilhou Carregando CSS sem bloquear a renderização comigo, que descreve uma estratégia para evitar que o carregamento de CSS bloqueie a renderização. É realmente genial:

<link rel="stylesheet" type="text/css" href="https://davidwalsh.name/fonts.css" media="none" onload="this.media="all";">
<link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media="all";">

Essencialmente usando media=none permite que o navegador baixe a folha de estilo sem bloquear a renderização, portanto, quando a folha de estilo for carregada, a configuração do media para a configuração desejada renderizará a tela como deveria. Muito bom!

Observação: tive alguns problemas com essa técnica no Firefox, mas ainda não descobri o motivo exato, pois às vezes não ocorre nenhum problema. Ler A publicação de Keith Clark para obter detalhes precisos e suporte.

3. Seletores de fontes separados

Se uma fonte não tiver sido carregada até o momento em que for usada, o usuário verá (nada, mais ou menos) um espaço vazio até que a fonte seja carregada. É claro que isso não é bom se as fontes não forem carregadas. No mínimo, o usuário será obrigado a olhar para um espaço vazio por alguns segundos. O melhor é manter as declarações de fontes personalizadas protegidas com uma classe que é adicionada ao corpo após o carregamento das fontes:

h1 { font-family: Arial, serif; } /* basic system font */
.fontsloaded h1 { font-family:  'MySpecialFont', serif; } /* custom system font */

<link href="https://davidwalsh.name/fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >

Ao usar a estratégia de declaração de fonte acima, uma fonte do sistema é carregada inicialmente e somente depois que a fonte personalizada for carregada é que ela será ativada, portanto, a tela não mostrará conteúdo vazio por nenhum período de tempo. Recomendo a criação de um mixin Stylus/Sass/Less para definir o font-family para que o seletor personalizado seja definido automaticamente.

4. Armazenamento de fontes no localStorage

O senhor sabia que pode armazenar fontes no localStorage?! Que loucura, não é?! Confira este post que detalha o processo e até fornece o código para fazê-lo!

A velocidade mata na Web e as estratégias fornecidas acima aumentarão muito o carregamento de fontes personalizadas e a velocidade do CSS. Todas as soluções são fáceis de implementar, o senhor só precisa dedicar tempo!