Como adicionar o Google Fonts ao WordPress? 4 Métodos fáceis!

Quer personalizar a tipografia do seu site? Você veio ao lugar certo. Neste guia, mostraremos diferentes métodos para adicionar o Google Fonts ao seu site WordPress passo a passo .

Por padrão, os temas do WordPress vêm com algumas fontes específicas e quando você publica conteúdo, essas fontes são renderizadas no frontend. No entanto, às vezes você pode querer usar uma fonte personalizada em seu site para dar a aparência perfeita para sua marca. É por isso que hoje vamos mostrar como incluir o Google Fonts em seu site !

Por que adicionar o Google Fonts ao WordPress?

A fonte que você usa tem um grande impacto no seu site. Por um lado, afeta o design do seu site e sua aparência. A fonte é uma das primeiras coisas que os visitantes veem quando chegam ao seu site, por isso deve corresponder ao estilo do seu negócio. Por outro lado, também pode ter um impacto na experiência do usuário. Por exemplo, se a fonte for difícil de ler, seus visitantes terão problemas para encontrar o que desejam e sair do seu site. Portanto, ter a fonte certa não apenas melhorará a aparência do seu site, mas também melhorará a experiência dos usuários .

É por isso que recomendamos que você use uma fonte amigável que transmita a essência do seu negócio. Existem vários serviços de fontes, como o Typekit da Adobe e o Friconix. No entanto, o melhor que existe é o Google Fonts, um serviço gratuito com milhares de famílias de fontes prontas para serem integradas ao seu site.

E a melhor parte é que adicionar o Google Fonts ao WordPress é muito fácil e leva apenas 5 minutos. Há várias maneiras de fazer isso.

Métodos para adicionar o Google Fonts ao seu site WordPress

Existem diferentes métodos para incluir o Google Fonts no WordPress:

1. Usando plug-ins
2. Editando o arquivo functions.php
3. Via Style.css
4. Editando o arquivo header.php

Todas essas opções fazem o trabalho, então escolha a que melhor se adapta às suas habilidades e necessidades. Antes de examinarmos mais de perto cada um desses métodos, você deve verificar se o seu tema vem com a integração do Google Fonts.

Verifique a integração de fontes do Google

A maioria dos temas do WordPress vem com um painel de temas dedicado. A partir daí, os usuários podem personalizar todo o tema sem escrever nenhum código. Alguns temas, como o GeneratePress, vêm com suporte integrado ao Google Fonts. Isso significa que você não precisa usar plugins ou códigos personalizados para integrar as fontes. Isso pode poupar algum tempo e tornar as coisas mais fáceis para você.

Se você usa um tema que vem com a integração com o Google Fonts, pode fazer alterações na tipografia do seu site no painel de temas ou no personalizador do WordPress. Portanto, antes de iniciar o processo de inclusão do Google Fonts em seu site, recomendamos que você verifique se o seu tema já vem com o Google Fonts .

Agora, vamos dar uma olhada em cada método para adicionar o Google Fonts ao seu site WordPress.

1) Usando plug-ins

Uma das maneiras mais fáceis de adicionar o Google Fonts ao WordPress é usar um plugin. Um dos melhores que existe é o Google Fonts Typography. Esta é uma ferramenta gratuita que o ajudará a incluir o Google Fonts em seu site sem escrever uma única linha de código.

Primeiro, instale e ative o plugin em seu site.

Depois disso, vá para Plugins e verifique as configurações do plugin.

Ao clicar nele, você será redirecionado para o personalizador do WordPress.

A partir daí, você pode assumir o controle da tipografia do seu site. Você verá quatro configurações principais:

• Configurações básicas
• Configurações avançadas
• Carregamento de fonte
• Depuração

Vamos dar uma olhada no que as configurações básicas e avançadas têm a oferecer.

Configurações básicas

Na seção de tipografia básica, você pode escolher sua família de fontes padrão para o corpo, título e campos de entrada.

Na lista suspensa em cada seção da família de fontes , você poderá escolher qualquer uma das centenas de fontes do Google. Se você souber a fonte desejada, basta digitá-la usando o recurso de pesquisa.

Para este tutorial, usaremos a fonte Work Sans. Depois de escolher uma fonte na lista suspensa, as alterações serão refletidas instantaneamente e você verá a visualização ao vivo com a nova fonte. Além disso, você poderá especificar um peso e estilo de fonte personalizados.

Quando terminar, publique as alterações.

Configurações avançadas

Nas configurações avançadas , você pode escolher a família de fontes para sua marca, navegação, conteúdo, barra lateral e rodapé.

Esse é um ótimo recurso se você planeja usar fontes diferentes em diferentes partes do seu site. Depois de selecionar uma fonte na lista suspensa, publique as alterações.

A versão gratuita do Google Fonts vem com recursos limitados, mas também há uma versão premium disponível que começa em 29 USD para um site.

Esta versão pro irá ajudá-lo a configurar coisas como tamanho da fonte, cor , otimização e elementos personalizados. É uma ótima opção se você quiser controlar todas as suas opções de tipografia. Por outro lado, se você não quiser gastar dinheiro com isso, você pode fazer essas alterações usando um pouco de CSS.

2) Edite o arquivo functions.php

Outra opção para adicionar o Google Fonts ao seu site WordPress é editar o arquivo functions.php . Antes de prosseguir com esse método, certifique-se de estar usando um tema filho. Se você não sabe como fazer isso, você pode ler sobre como criar um tema filho ou usar um plugin de tema filho.

Para este método, você pode editar diretamente o arquivo functions.php ou usar um plugin. Se você é iniciante, recomendamos que use o plug-in Code Snippets para adicionar código personalizado ao seu site. Neste guia, usaremos trechos de código.

NOTA : Vale a pena notar que, se você usar snippets de código, não precisará criar um tema filho. No entanto, sempre recomendamos ter um.

Então, para editar o functions.php usando Code Snippets, primeiro instale e ative o plugin.

Em seguida, vá para as configurações dos plugins. A partir daí, você pode adicionar um novo snippet ao seu site.

Selecione uma fonte

Em uma nova guia, abra o Google Fonts e selecione uma família de fontes para usar em seu site. Você pode usar o recurso de fonte de pesquisa no site ou simplesmente navegar. No nosso caso, usaremos a família Lato.

Depois de selecionar uma fonte, você irá para a página da fonte. Você verá a opção de visualização onde poderá testar a fonte antes de adicioná-la ao seu site. Depois disso, selecione os estilos que deseja usar. Por exemplo, vamos escolher os estilos Regular e Negrito .

Você pode revisar suas seleções no painel direito.

Depois de adicionar os estilos, você está pronto para incorporá-los no WordPress. Para fazer isso, copie o link da família de fontes da guia Incorporar .

Adicione a fonte ao seu site

Agora, copie o seguinte trecho e cole-o no plugin Code Snippets.

 <?php
function wpb_add_google_fonts() {
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap', false );
   }
   
   add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts');
?>

Certifique-se de substituir o URL da fonte pelas fontes que você selecionou.

Depois disso, salve o trecho e ative-o. Você adicionou com sucesso o Google Fonts ao seu site WordPress !

Se você não quiser usar um plugin para esta tarefa, simplesmente cole o código acima no arquivo functions.php do seu tema filho usando um cliente FTP.

Aplicar a nova fonte

Depois disso, você pode aplicar a nova fonte com um pouco de CSS. Por exemplo, para editar a fonte do corpo, você pode adicionar o código a seguir à seção CSS adicional no personalizador.

 corpo {
família de fontes: 'Lato', sem serifa;
} 

Depois de publicar a alteração, você verá como a fonte do corpo muda. Como você está usando o personalizador, verá imediatamente as alterações na seção de visualização.

Se você precisar modificar quaisquer outros elementos em seu site, precisará modificar o código acima e especificar os elementos que deseja alterar e a família de fontes. Por exemplo, se você quiser alterar todos os cabeçalhos h3 para a nova fonte, escreva algo assim:

 h3 { 
família de fontes: 'Lato', sem serifa; 
}

Dessa forma, você poderá adicionar famílias ilimitadas de fontes do Google e personalizar seu site WordPress.

3) Personalize o style.css (@import)

Outra maneira de adicionar o Google Fonts ao WordPress é através do arquivo style.css . Desta vez, em vez de usar códigos PHP, você editará o style.css do site para adicionar novas famílias de fontes.

Selecione a fonte

Primeiro, acesse o Google Fonts e selecione as que deseja usar em seu site. Na seção Incorporar , selecione o modo @import .

Adicione a fonte ao seu site

Agora, o painel mostrará um código CSS exclusivo. Basta copiar o código e colá-lo no CSS Adicional em seu painel do WordPress.

Em seguida, pressione o botão Publicar .

Aplicar a nova fonte

Depois disso, você pode decidir onde deseja aplicar a nova fonte. Por exemplo, escolhemos a fonte Kufam em letra cursiva, então para modificar a fonte do corpo, use o seguinte código CSS:

 corpo {
font-family: 'Kufam', cursiva;
}

Como você pode ver, a seção de visualização ao vivo atualiza automaticamente e exibe as alterações.

Da mesma forma, se você deseja aplicar a nova fonte a todos os títulos h2, o código que você precisa usar é:

 h2 { 
font-family: 'Kufam', cursiva; 
}

Este é outro método muito simples que até os iniciantes podem usar. E o bom é que você não precisa de nenhum plugin.

4) Edite o arquivo header.php

O quarto método para adicionar o Google Fonts ao seu site WordPress é editando o arquivo header.php . Vimos anteriormente como editar o cabeçalho no WordPress, então se você leu esse post, isso será fácil. Não se preocupe se você não tiver. Nesta seção, mostraremos como incluir novas fontes. Embora envolva um pouco de codificação, é bastante simples, mesmo para iniciantes.

Para isso você vai precisar de:

• O link do Google Font
• O caminho para seu arquivo style.css

Vamos ver como obter cada um deles.

Obter o link do Google Font

O link da fonte pode ser obtido no site do Google Fonts. Procure a fonte que você está planejando usar e selecione-a.

Na barra de endereço, você verá o URL da fonte.

Obtenha o caminho style.css

Agora, vamos ver como encontrar o caminho style.css . Se você tiver acesso ao cPanel, faça login no painel de controle do seu site e abra o gerenciador de arquivos. Na pasta wp-content , você verá uma pasta chamada themes . É aí que todos os seus temas instalados vivem. Antes de avançar, você precisa saber qual é o tema ativo do seu site.

Você pode encontrar seu tema ativo na seção Aparência no painel do WordPress.

Por exemplo, no nosso caso, é Vinte e Vinte.

No cPanel, iremos para wp-content > themes > twentytwenty.

No painel esquerdo, você verá o caminho para seus arquivos de tema. Copie-o.

Seguindo nosso exemplo, temos algo assim: public_html/wp-content/themes/twentytwenty . Agora, tudo que você precisa fazer é remover a parte public_html , adicionar o nome de domínio lá e mencionar o arquivo /style.css no final do código. Portanto, o novo código será algo como este www.example.com/wp-content/themes/twentytwenty/style.css .

Quando você abre a URL em seu navegador, o arquivo style.css será carregado. Se você receber uma página de erro 404, isso significa que o caminho para o arquivo style.css está errado.

Adicione o link do Google Font e style.css ao cabeçalho

Depois de obter o link da fonte e o caminho style.css, tudo o que você precisa fazer para adicionar o Google Fonts ao seu site WordPress é copiar o código abaixo e colá-lo no arquivo de temas header.php .

 <link href="https://fonts.googleapis.com/css2? family= Oxygen & display=swap" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "http://yoursite.com/wp-content/themes/yourtheme/style.css" media = "all" >

Lembre-se de substituir o URL pela sua fonte e alterar o caminho para o seu style.css com o seu próprio.

Se você não se sentir confortável em modificar o arquivo header.php , você pode usar o plugin Insert Headers and Footers para adicionar o código. Vamos dar uma olhada em como usar esta ferramenta.

Alterar header.php com um plugin

Primeiro, instale e ative Inserir Cabeçalhos e Rodapés em seu site.

Depois disso, vá para Configurações > Inserir Cabeçalhos e Rodapés .

Você verá três blocos lá.

• Cabeçalho
• Corpo
• Rodapé

Como você adicionará o código à seção de cabeçalho, cole o código acima com a URL da sua fonte e o caminho style.css na seção Scripts na seção de cabeçalho . Em seguida, lembre-se de salvar as alterações.

Você pode deixar as seções do corpo e do rodapé vazias, pois não fará nenhuma alteração lá.

O código que você acabou de colar ficará logo acima da tag </head> . Se você não estiver usando o plugin, certifique-se de colar o código HTML na seção <head> . Caso contrário, não funcionará!

Pronto, você concluiu a integração e adicionou o Google Fonts ao seu site!

Dicas do Google Fonts Pro

Adicionar o Google Fonts ao seu site é apenas o primeiro passo. Depois disso, recomendamos que você confira algumas de nossas dicas profissionais que ajudarão você a otimizar ainda mais seu site.

Hospede o Google Fonts localmente

O Google Fonts é uma biblioteca online que contém muitas fontes gratuitas. Ao usar o serviço deles para incorporar fontes em seu site, você enviará solicitações para seus servidores e buscará o conteúdo solicitado. Se o servidor do Google Fonts estiver enfrentando problemas técnicos, isso também pode afetar o desempenho do seu site.

Para se livrar desse problema, considere hospedar as fontes em seu servidor local. Se você fizer isso, não precisará enviar solicitações externas adicionais. No entanto, lembre-se de que isso pode consumir os recursos do seu servidor.

Ativar pré-busca de DNS

A maioria dos plugins de cache do WordPress vem com um recurso chamado pré-busca de DNS. A ideia é que, ao enviar solicitações HTTP externas, seu site fique mais lento. Para corrigir isso, você pode usar o recurso de pré-busca de DNS que permite inserir URLs externos que você pode buscar para reduzir as solicitações externas.

Aqui está um exemplo da seção de pré-busca de DNS do plugin WP Rocket.

Tudo o que precisamos fazer é digitar o domínio do Google Fonts na seção URLs to prefetch e salvar as alterações.

Limitar pesos de fonte

Para personalizar as fontes, você pode usar os pesos das fontes. Existem muitas opções de peso de fonte disponíveis, como:

• Afinar
• Luz extra
• Leve
• Regular
• Médio
• Semi-negrito
• Negrito
• Extra-negrito
• Preto

Normalmente, os sites usam o peso da fonte Regular e o Negrito para títulos. Portanto, ao selecionar estilos, escolha apenas os estilos que planeja usar. Caso contrário, adicionar pesos extras ao servidor que você não usará resultará no aumento de solicitações HTTP.

Conclusão

Em suma, se você adicionar o Google Fonts ao WordPress, poderá personalizar a tipografia do seu site. Não só o seu site terá uma aparência melhor, mas também proporcionará aos seus clientes uma experiência melhor.

Vimos métodos diferentes para fazer isso:

1. Com plug-ins
2. Através do arquivo functions.php
3. Via Style.css
4. Editando o arquivo header.php

Então, qual método você deve usar? Todos eles farão o trabalho, então depende de suas habilidades e preferências. Se você não se sentir confortável com a codificação, recomendamos que você use o método de plug-in. A tipografia do Google Fonts é muito fácil de usar e será um ótimo complemento para o seu site. No entanto, se você não quiser adicionar mais plugins ao seu site, você pode editar o arquivo functions.php do seu tema usando o plugin Code Snippets ou via FTP. Além disso, o método style.css @import é outra maneira rápida e fácil de adicionar Google Fonts com algumas linhas de código CSS. Alternativamente, você também pode adicionar a URL da sua fonte e o caminho style.css ao arquivo header.php .

Se você gostou deste artigo, compartilhe com seus amigos nas redes sociais. Para postagens mais interessantes para melhorar seu site, confira nossa seção de blog.

Qual método você pretende usar? Você conhece algum outro? Deixe-nos saber na seção de comentários abaixo!