[Wordpress] Google fonts no Wordpress

 

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.

Google Fonts

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.

WP Google Fonts

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.

Supreme Google Webfonts


:: Créditos: Escola WP

Nenhum comentário:

Postar um comentário

Deixe seu comentário