Há especialista afirmam que Webdesign é 95% Tipografia, já que estudos afirmam que a internet têm 95% de conteúdo em texto. Sem assim vamos falar de como controlar melhor esse aspecto do seu site é WordPress, as fontes usadas. Então neste tutorial vou trazer algumas opções de gerenciamento de fontes para sites WordPress.
Antes os desenvolvedores precisavam usar apenas fontes que tivessem certeza de que os visitantes teriam em suas máquinas, fazendo com que a diversificação no uso de fontes em sites fosse algo extremamente raro na internet.
Com o tempo as coisas forma se tornando muito mais simples, até que para alegria geral o Google lançou o Web Fonts, uma coleção de centenas de fontes para web, com uma excelente ferramenta para selecionar fontes e muito simples de usar, onde basta copiar o código fornecido para usá-la em seu site ou blog, sem complicações como ter que enviar os arquivos das fontes para seu servidor.
Adicionar o código da nova Fonte ao seu Template WordPress
Após selecionar a fonte de sua preferência para clique no botão Quick-use, conforme imagem acima. A próxima tela é a página de utilização rápida que em apenas 4 passos lhe explica tudo o que você precisa saber para inserir a fonte escolhida em seus site.
O primeiro passo é selecionar os estilos de fonte que você deseja usar. Verifique se ao menos as caixas para Normal, Negrito e Itálico estão marcados, mas atenção algumas fontes não possuem todos esses estilos.
Note que ao lado dessa opção há uma espécie de medidor que avalia o Impacto no tempo de carregamento da página e que mudar de acordo com as opções que você marca, tanto neste, quanto nos próximos passos. Isso é muito interessante e deve te auxiliar bastante na escolha da sua fonte. Vamos falar mais disso adiante.
O segundo passo é para algumas fontes que possuem mais de um conjunto de caracteres, então a caixa de extensão Latina está disponível ou não, a maioria das pessoas não precisará marcar esta opção.
Após essas opções você terá pela frente a simples tarefa de adicionar os códigos disponibilizados nos seus devidos arquivos. Para tal o Google apresenta três possibilidades de inserção de códigos:
- Adicionar a tag <link> no arquivo header.php do seu template
- Adicionar a regra @import no arquivo style.css do seu template
- Adicionar o javascript no arquivo header.php do seu template
Por fim basta integrar a nova fonte em seus estilos CSS, chamando o nome da fonte conforme exemplo abaixo:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
Usando as Fontes do Google com auxílio de Plugins do WordPress
Para facilitar a vida dos desenvolvedores do WordPress, existem alguns plugin que possibilitam a seleção das fontes do Google, de forma simples e, em seguida, permitem que você escolha em quais elementos você gostaria de utilizar essas fontes: cabeçalhos, parágrafos, citações, listas, etc.
Entre estes plugins podemos destacar o WP Google Fonts, um plugin gratuito, disponível do diretório de plugins do WordPress. Com ele é possível selecionar até seis fontes que você deseja usar em seu site a partir de uma lista suspensa, escolhendos em quais elementos cada uma destas fontes pode ser usada. Com ele você também pode adicionar seu próprio CSS personalizado.
Outra boa opção é o plugin Supreme Google Webfonts, outro plugin gratuito, que além funciona com o serviço Google Fonts, permite que você selecione as fontes durante a criação de seu conteúdo, ao invés de em todo o seu site.
Quando ativado, são adicionados dois novos campos no editor de textos do seu WordPress, o que lhe permite selecionar fontes do diretório Google Fonts e alterar o tamanho do texto. A lista suspensa fonte permite que você visualize cada fonte, assim você não precisa voltar ao Google Fonts para ver o estilo de cada fonte.
Impacto no Tempo de Carregamento do Site
Não é à toa que o Google inseriu o medidor de impacto que cada fonte causa no tempo de carregamento do site. O uso inteligente das fontes que o Google oferece pode diminuir o tempo de carregamento do seu site WordPress, já que haverá uma requisição a menos no seu servidor.
Porém o uso de fontes muito complexas ou de muitas opções de estilos de fonte pode ter um efeito contrário no que seria ideal para a velocidade do seu site, e assim ajudar no SEO do seu WordPress.
Por isso recomendo que antes de selecionar as fontes que vai usar em seu site analise esse fator no site do Google Fonts, onde você poderá ver o impacto que suas escolhas terão sobre o tempo de carregamento do site, ajudando você a fazer uma seleção realmente eficiente.
Outra recomendação é selecionar apenas as fontes que você realmente vai usar em seu site, assim como ó escolher os estilos que você com certeza vai usar com frequência, como normal e negrito.
Conclusão
Comparando os plugins que citei o WP Google Fonts plugin, apesar de não permitir que você visualize as fontes dentro de seu painel WordPress, como no Supreme Google Webfonts, ele não carrega as fontes que você não usará em seu site, evitando que seu site tenha mais requisições a fazer ao servidor do Google.
Logo, você terá que decidir se planejar com uso de fontes adequadas é um sacrifício que você está disposto a fazer para evitar a perda de velocidade no seu site.
Quero saber se você já utiliza Fontes do Google. Compartilhe sua experiência com a gente. Deixe seu comentário e dúvidas.
Abraços,
