Google tiene una extensa gama de tipografías que permiten dar mas estilo a nuestros websites, y a pesar de que la explicación que tienen en su web para incluir estas tipografías es bastante clara, no funciona de paquete con nuestros themes de WordPress. Así que esta será una corta guía para agregar tipografías Google a tu WordPress:
Puedes escoger cualquiera de estas tres formas para hacer el llamado a la tipografía desde google, esto debe ir como primer item en tu declaración de head
[wptabs style=»wpui-dark»]
[wptabtitle] como link [/wptabtitle]
[wptabcontent] <link href=’http://fonts.googleapis.com/css?family=Fjalla+One’ rel=’stylesheet’ type=’text/css’> [/wptabcontent]
[wptabtitle] como import [/wptabtitle]
[wptabcontent] @import url(http://fonts.googleapis.com/css?family=Fjalla+One); [/wptabcontent]
[wptabtitle] como javascript [/wptabtitle]
[wptabcontent]<script type=»text/javascript»>
WebFontConfig = {
google: { families: [ ‘Fjalla+One::latin’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script> [/wptabcontent]
[/wptabs]
Segundo Paso: Incluyendo la tipografía en el CSS
Este es el paso general que no va a cambiar, ya que es el llamado interno a la tipografía por la clase que queremos que adopte la misma. El paso es tan sencillo como: (NOTA:, la segunda tipografía, Arial, puede ser cualquiera ya que es la que funcionaría en dado caso de que la tipografía Google falle o no se encuentre)
font-family: ‘Fjalla One’, Arial;
La forma WordPress
Cuando se quieren agregar tipografías Google a un theme de WordPress, y especialmente cuando tenemos temas hijos (child themes) en vez de incluir la tipografía desde el head como indica el código de Google, se incluye como una función en el head.php. La forma de agregar la función en el header es la siguiente:
function load_fonts() {
wp_register_style(‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Fjalla+One’);
wp_enqueue_style( ‘googleFonts’);
}
add_action(‘wp_print_styles’, ‘load_fonts’);
Luego de agregar esto, simplemente incluimos la tipografía en nuestro css:
