Fontes de Sistemas : Otimize seu site usando-as

As fontes de sistemas dão um estilo característico ao nosso site e normalmente os designers costumam usar fontes especiais para ilustrar os layouts ou em alguns casos, nossos clientes possuem suas fontes corporativas, como uma marca registrada para sua imagem da marca. O problema é que isso normalmente não garante uma boa otimização em seu site, devido ao peso de carga de determinadas fontes.

É importante considerar que um bom Servidor Web ou um CDN pode e irá ajudar muito nesse processo de carga, bem como, as tarefas de SEO desenvolvidas corretamente.

Ultimamente, as fontes do google disponíveis em Google Fonts são muito usadas. Trata-se de um extenso catálogo de fontes onde podemos escolher famílias, tipos, etc e utilizar gratuitamente em nosso site.

Utilizar fontes distintas no design geralmente parecem uma ideia muito boa, mas algumas vezes ocorrem pânico quando você coloca a URL do seu site na ferramenta do Google PageSpeed ​​Insights e recebe o alerta:

Excluir o JavaScript que bloqueia a exibição.

Conclusão: A sua fonte aparece bloqueando a exibição do conteúdo na metade superior da página. E é aí que você se pergunta: como posso corrigir isso? A resposta pode ser de duas maneiras:

• Assuma isso como imperativo no design do seu site;
• Ou, use alguma estratégia para o carregamento das fontes para colaborar com otimização do site.

Este último passa pelo filtro PageSpeed ​​Insights, mas você encontrará um FOUT, que no caso é um efeito de um pequeno “flash” de milissegundos (na minha opinião horrível rsrsrs), nele iremos perceber que no primeiro momento seu site possui uma fonte e quando ele carrega, o script entra em ação e a altera pela fonte do design.

Resumindo: Se não gostar do efeito, conforme-se com carregamento sendo comprometido, mas se quiser melhorar a velocidade do carregamento e o design ficar em segundo plano, utilize fontes de sistemas ou um script de carregamento.

Fontes de Sistema

Com essa tabela apresento algumas fontes de sistema.

Sabemos que não são tão bonitas, mas são praticas. Para utilizar, adicione o código abaixo em seu CSS.

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif, "Apple Color Emoji";
}

Script de carregamento de fontes do google

Você ou o seu estilo do tema insere as fontes do google da seguinte forma:
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
 
Associando a fonte aos elementos no HTML:
 
.css-selector {
    font-family: 'Open Sans';
}

Veja como usar o script para uma melhora na otimização do site

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Open Sans', 'Titillium Web']
    }
  });
</script>

Coloque no lugar de Open Sans e Titillium Web os nomes das famílias de fontes que você selecionou, separadas por vírgulas e você superará esse filtro no PageSpeed.