É hora de outro screencast de emparelhamento! Desta vez estou com Zach Leatherman, do Filament Group. Zach fez muitas pesquisas, escreveu e falou sobre o carregamento de fontes da web nos últimos anos. Ele tem um guia completo sobre isso!
Existem alguns problemas com a maneira padrão como as fontes personalizadas são carregadas. Tipo, apenas ligando uma fonte em algum CSS por meio de @ font-face. Até a maneira como o Google Fonts fornece a você o uso de suas fontes, Zach chama de anti-padrão (no final das contas, é apenas vanilla @ font-face). Navegadores diferentes fazem coisas diferentes com @ font-face. Por exemplo, algumas versões do Safari tornam o tipo definido em uma fonte personalizada invisível até que a fonte carregue, mas não tem tempo limite, então, se a fonte falhar por qualquer motivo, você pode estar no pior cenário possível: texto para sempre invisível em o site.
Você não tem muito controle sobre como as fontes @ font-face são carregadas, a menos que você faça justiça com suas próprias mãos. Isso significa coisas como: inlining a fonte, subconjuntos da fonte (seja com um conjunto “crítico” de glifos, ou pelo menos reduzindo glifos para o idioma em uso), usando carregadores de fontes para determinar quando as fontes são carregadas e alterando classes para usá-las . Esse último é particularmente interessante. Ao exercer controle sobre o carregamento de fontes, você não só tem que lidar com quando / como o navegador carrega o CSS que contém @ font-face, mas também quando / como o navegador encontra elementos de texto que devem usar essas fontes. Fontes que não são usadas não são baixadas. Portanto, às vezes o procedimento é forçar o download deles, esperar que eles façam o download e, em seguida, aplicar classes para realmente usá-los.
Algumas ferramentas que vimos:
- O Firefox DevTools era melhor para olhar as fontes em uso
- A criação de subconjuntos de fontes pode ser feita no gerador Font Squirrel ou Font Prep.
- Quais glifos você subconjunto? Teste o que você precisa em determinados URLs com Glyphhanger.
- Como saber quando o navegador está usando negrito / itálico falso? faux-pas.