Otimizando (reduzindo) solicitações de fontes da Web

Atualmente, minha página inicial usa 5 fontes da web - eu gostaria que fosse 6 devido ao suporte irregular ao Helvetica Neue. Uma das fontes são os ícones 'FontAwesome', as outras 4 são usadas apenas para uma ou duas palavras (ou seja, eu tenho um cabeçalho que diz "Otimização" escrito em letras que parecem um computador antigo).

Duas dessas fontes estão disponíveis no Google e solicito apenas as letras necessárias (e isso funciona muito bem). No entanto, os outros 2 são do openfontlibrary.org e estão disponíveis apenas em um único formato. O que não é grande coisa (de qualquer maneira, vou precisar deles com segurança para que as cópias locais sejam melhores), uma rápida com o gerador de fontes fontquirrel.com @ font e eu os tenho em vários formatos e o CSS para inicializar.

E então eu testo o tempo de carregamento da minha página ... ugh. Suponho que seria possível agrupar minhas cópias locais. Alguém tem experiência nessa área?

O uso de fontes da web não padrão tem um impacto significativo no desempenho nos tempos de carregamento da página em comparação com o uso de fontes do sistema padrão da web seguras. Este é o caso, independentemente de você estar usando JavaScript ou @ font-face .

Deve-se sempre analisar cuidadosamente se devem ser usadas fontes da Web não padrão.

Algumas perguntas a serem feitas ao considerar o uso de fontes da web não padrão:

• Você os está usando apenas para mostrar que pode e sabe como?
• O servidor tem o objetivo de executar um design melhor e proporcionar uma melhor experiência ao usuário?
• O método usado para implementar as fontes é compatível com vários navegadores?
• Uma imagem poderia ser suficiente, especialmente se forem apenas algumas palavras em uma única página ou apenas algumas páginas?
• A fonte é diferente o suficiente das fontes seguras da Web para que valha a pena usar?
• Se a fonte for usada como texto do corpo, é de fácil leitura ou foi projetada para cabeçalhos?

Certifique-se de pelo menos entender os fundamentos da tipografia e como isso afeta o seu design, e use isso para sua vantagem.

os outros 4 são usados ​​apenas para uma palavra ou duas

Isso é uma afirmação literal?
Se sim, por que você está se preocupando em incorporar essas fontes, subconjuntos ou não? Você nem deveria estar otimizando neste caso, apenas removendo . Faça imagens do texto que você precisa e use sua técnica favorita de substituição de texto. Você está adicionando solicitações HTTP e tempo de download ao seu site com apenas algumas palavras .

Para acompanhar, acabei usando as opções avançadas do gerador @ font-face para subconjunto de minhas fontes, portanto, carreguei apenas os caracteres necessários.

Uma das opções era codificar Base64 as fontes (o que me permitiu incorporá-las no meu arquivo CSS). Se a memória servir, o Base64 codifica .woffa .ttffonte e.

Embora eu goste de oferecer suporte ao maior número de usuários possível, decidi que não valia a pena abrandar os usuários de navegadores modernos com dados extras, provavelmente redundantes, então usei o Modernizr (que usa yep / nope.js) para carregue assincronamente um CSSarquivo separado com referências a todos os formatos de fonte, de acordo com a sintaxe reforçada da fonte à prova de balas .

Eu andei de um lado para o outro entre Base64 que codifica a .wofffonte e inclui o restante das declarações de fonte no CSSarquivo primário ou inclui apenas a Base64 codificada .woffno primário CSSe depois inclui os outros formatos em um CSSarquivo que eu carreguei de forma assíncrona Modernizr.load.

Eu prefiro tempos de carregamento rápidos do que estéticos, portanto o FOUC não era uma grande preocupação, mas observarei que a maioria dos navegadores 'piscou' nas fontes quando elas carregaram (que era depois que as fontes codificadas pela Base64 no CSScarregamento) eram assíncronas.

No lado positivo, uma vez que as fontes foram carregadas e armazenadas em cache (cabeçalhos de longa duração definidos no servidor), o 'piscar' foi eliminado e eu pude carregar conjuntos estendidos de fontes para que os usuários que falassem outros idiomas (e usassem o O widget de tradução do Google incluído) ainda veria o texto estilizado.

Como esse era o meu próprio site, pude experimentar, mas o fiz principalmente para "mostrar", sou mais conservador com os sites dos clientes.

Outra técnica que eu implementei foi colocar todas as .svgfontes em um único arquivo e identificar cada uma com seu próprio ID, em vez de ter cada uma em um arquivo separado, como o gerador @ font-face produz.