A API do Google Fonts Webfonts permite que você carregue facilmente fontes personalizadas (em oposição a fontes de desktop padrão como Arial, Georgia, Times New Roman ou Helvetica) simplesmente referenciando uma folha de estilo na tag de cabeçalho do seu site. Se você estiver desenvolvendo temas do WordPress e quiser personalizar as fontes do seu site sem o uso de um plug-in, poderá facilmente enfileirar fontes personalizadas do Google em seu site para uso em seu CSS.
Etapa 1: selecione sua fonte personalizada do Google
Usar a fonte do Google é muito fácil. Se você for para a página principal em “ Google Webfonts ” e clicar em qualquer fonte, um pequeno pop-up aparecerá para que você possa personalizar a fonte e visualizar o URL correto para o CSS da fonte.
Se você estiver criando um site HTML simples ou editando seu tema WordPress personalizado pessoal, tudo o que você precisa fazer para carregar a fonte personalizada em seu site é copiar e colar o link da folha de estilo para a fonte personalizada hospedada no google em seu <head> tag (localizado em header.php no WordPress).
Dito isso, a maneira preferida de adicionar a fonte do Google ao seu tema WordPress (muito importante ao criar temas para distribuição) é usar o gancho de ação wp_enqueue_scripts do WordPress.
Etapa 2: enfileirar sua fonte do Google
Como mencionado anteriormente, você pode facilmente colocar o código do Google em seu arquivo header.php, no entanto, é melhor enfileirar o script por meio do gancho de ação, conforme observado anteriormente. Isso permite modificações mais fáceis do tema filho e também evita conflitos com plugins de terceiros.
Passo 1: Para começar, cole o seguinte código em seu arquivo functions.php (se este arquivo não existir, crie um novo na pasta do seu tema e certifique-se de que o código abaixo esteja colado dentro das tags php.
function myprefix_enqueue_google_fonts() {
wp_enqueue_style( ‘roboto’, ‘https://fonts.googleapis.com/css?family=Roboto’ );
}
add_action( ‘wp_enqueue_scripts’, ‘myprefix_enqueue_google_fonts’ );
Neste trecho em particular, usamos a função wp_enqueue_style para carregar a fonte “Roboto” do Google no site. No entanto, você pode usar essa função várias vezes para carregar várias fontes.
Etapa 2: agora você só precisa abrir seu arquivo style.css e alterar o nome da fonte para os elementos para os quais deseja a fonte personalizada ou adicionar algum CSS personalizado ao seu site para alterar a fonte, como o exemplo a seguir para alterar todo o corpo fonte para Roboto.
body { font-family: “Roboto”; }
Extra: Usando um plug-in do WordPress do Google Fonts
É claro que se você não estiver desenvolvendo um tema para distribuição ou não estiver usando um tema filho para seu projeto, talvez seja melhor usar um plugin personalizado para adicionar fontes ao seu site. No artigo intitulado “ Melhore a tipografia do seu site WordPress com o Google Fonts ”, recomendamos alguns plugins incríveis que permitirão que você altere facilmente as fontes do seu site WordPress e, mais especificamente, usando o Google Fonts.
Seus pensamentos…Como você usa o Google Fonts?
Para você agora! Deixe-nos saber nos comentários como você está usando as fontes do Google no WordPress. Você está desenvolvendo temas ou plugins, criando sites personalizados ou você é um freelancer ajudando as pessoas a ajustar seus designs de sites atuais. Também deixe-nos saber quais são algumas das suas fontes favoritas do Google. Meus favoritos pessoais são Roboto, Lora e PT Serif.
