Se você costuma usar ou pretende usar a biblioteca de fontes do Google no WordPress, neste pequeno artigo você ver como deve incluir as fontes dentro do tema…
O Google Library tem tantas ótimas fontes, é comum ver os temas do WordPress usando-as, mas é importante saber como usá-las dentro do tema.
Os dois erros mais comuns que se pode detetar em alguns temas que usam a biblioteca de fontes do Google no WordPress são: incluindo o link da fonte do Google dentro de <style> na marcação <head> do tema ou usando @import no arquivo CSS do tema.
O uso desses recursos pode causar problemas e conflitos a longo prazo, e ainda se agrava mais se pretendermos criar um tema filho do tema em uso no WordPress.
Para evitar esses erros, a melhor maneira de evitar o problema acima é usar o arquivo “functions.php” do WordPress e as funções do WordPres “wp_register_style();” e “wp_enqueue_style();” para registar a fonte do Google e, em seguida, incluí-lo no WordPress no ponto correto.
No código abaixo, podemos seguir um exemplo incluido no arquivo functions.php do tema do WordPress em uso, convém lembrar que deverá fazer um backup antes de fazer qualquer alteração no arquivo, feito isso adicionamos:
/*-----------------------------------------------------------------------------------*/
/* Register and load front end CSS
/*-----------------------------------------------------------------------------------*/
if( !function_exists( 'my_enqueue_styles' ) ) {
function my_enqueue_styles() {
wp_register_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans', array(), '', 'all' );
wp_enqueue_style( 'google-fonts' );
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');
}
No código acima, foi usado a função “wp_register_style()” para registar com segurança o novo estilo com o WordPress, a fonte Google usada é “Open Sans”, nomeamos o wp_register_style() $handle de ‘google-fonts’ que é seu identificador único e depois passamos o URL da fonte do Google para o parâmetro wp_register_style() $url.
Vale referir que podemos usar o wp_register_style() $handle para chamar mais que uma fonte, não é necessário usar um wp_register_style() para cada fonte pretendida, no $handle usamos: ‘http://fonts.googleapis.com/css?family=Encode+Sans+Condensed|Open+Sans’.
Depois de registamos com segurança o novo estilo, usamos o “wp_enqueue_style()” para adicionar a fonte à nossa página do WordPress, onde passamos identificador único, tipo: “wp_enqueue_style( ‘google-fonts’ )“.
Para finalmente, usamos a função “add_action()” para ligar nossa função my_enqueue_styles à ação wp_enqueue_scripts, que adicionará nosso estilo ao tema WordPress.
Feito isso, devemos agora configurar as famílias de fontes em nosso arquivo CSS do tema em uso. Abro o arquivo style.css do tema e configuramos a nova família de fontes:
html {
font: 400 16px 'Open Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
}
h1 {
font: 400 36px 'Encode Sans Condensed', serif;
}
Agora já sabe como usar corretamente a biblioteca de fontes do Google no WordPress.