Cómo instalar fuentes Google en WordPress

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

  1. Importa las fuentes de Google: Añade al principio de la cabecera de tu tema (header.php), antes del cierre de </head> así:

    O también mediante Javascript de este otro modo:

    En ambos casos estamos importando la fuente llamada Faster One, que personalmente me gusta mucho.
  2. 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í:

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.

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.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (5 votos, promedio: 4,40 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest