El otro día me preguntaba un amigo por Twitter que cómo podía usar otras fuentes en WordPress. En concreto, el ejemplo que me mostraba en realidad no usaba otra fuente sino que era una imagen.
Luego, además, estaba el asunto de que aunque tu definas un tipo de fuente en tu WordPress, si el usuario que lo ve no tiene esa fuente instalada en su sistema no la verá, sino su “equivalente“, pero bueno, en cualquier caso me animé a ver maneras de instalar más fuentes.
Y las primeras que me vinieron a la mente fueron las fuentes Google, pues tienen una virtud fundamental: no necesitas instalarlas en tu servidor, sino que las usas desde los servidores gratuitos de fuentes de Google.
Así que vamos a ver un par de maneras de usarlas …
… Instalar fuentes Google con plugin …
Cómo se que muchos sois amantes de los plugins, hay uno que hace maravillas a este respecto, WP Google fonts. Solo tienes que instalarlo y, una vez activo, en su página de ajustes puedes definir qué fuentes y para qué estilos de tu tema usarás fuentes Google.
Lo mejor de este plugin es que te evitas modificar manualmente la hoja de estilos, editar la cabecera de tu sitio para hacer una “llamada” al servidor de fuentes de Google (de otro modo imprescindible) y que dispones de una interfaz para hacer los cambios de manera rápida y sencilla.
… Instalar fuentes Google manualmente …
Ahora bien, si quieres hacerlo tu mismo en realidad no es complicado, con solo 2 pasos tienes a tu disposición las – ahora mismo – 573 familias de fuentes gratuitas de Google …
- Importa las fuentes de Google: Añade al principio de la cabecera de tu tema (
header.php), antes del cierre de </head> así:
<link href='http://fonts.googleapis.com/css?family=Faster+One' rel='stylesheet' type='text/css'>
O también mediante Javascript de este otro modo:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Faster+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>
En ambos casos estamos importando la fuente llamada Faster One, que personalmente me gusta mucho.
- Integra las nuevas fuentes en tu hoja de estilos: abre tu fichero
style.css y añade clases CSS para usar la/s nueva/s fuente/s donde quieras, algo así:
body {
font-family: 'Faster+One', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
Otra manera de hacerlo manualmente, en vez de hacer la llamada en la cabecera HTML, que me parece más elegante, y es mediante una función en tu plugin de funciones o archivo functions.php del tema.
En el siguiente código primero se hace la llamada a la hoja de estilos mediante wp_register_style. En el segundo parámetro tenemos la ruta a la hoja de estilos, que deberás adaptar a tu instalación. Para finalizar, la llamada wp_enqueue_style( ‘googleFonts’ ) se ocupa de llamar a la hoja de estilos identificada en wp_register_style. Al guardarlo tendremos disponibles las fuentes “reclamadas” para usarlas en nuestra hoja de estilos como en el segundo paso del método anterior.
Seguramente te habrás fijado que en el código no se importa solo una fuente, sino varias, separándolas con la barra vertical (la de encima del número 1 del teclado). Google deja hacer este tipo de llamadas múltiples, lo que es muy cómodo.
//Importación de fuentes Google
add_action('init', 'theme_js_css');
function theme_js_css(){
wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Faster+One|Bonbon|Romanesco|Molle');
wp_enqueue_style( 'googleFonts' );
}
Y ya está, un par de maneras sencillas (en realidad son tres) de usar las fuentes gratuitas de Google en WordPress.
Nota final: Aunque nunca lo recomiendo, pues si hay una hoja de estilos es para respetarla, si quieres usar las nuevas fuentes en textos desde el editor, siempre puedes añadir más iconos al editor visual de WordPress.
