Agregar Google Fonts en WordPress sin usar plugins

[ 30 mayo 2018 ] [ Actualizado: 5 junio 2018 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css mejoras

¿Tienes un theme en el cual te gustaría añadir un tipo de letra adicional?, pero es posible que quieras evitar el uso de plugins adicionales y mantener tu sitio lo más liviano posible, en este artículo aprenderás cómo agregar Google Fonts en WordPress sin usar plugins de manera simple.

1- Seleccionando las Fuentes a usar

Lo primero que tienes que hacer es ir al sitio de Google Fonts y seleccionar los tipo de letra que quieres añadir a tu sitio web.

Cuando añades una familia de fuente puedes ver la fuente añadida en la parte inferior, al desplegar verás el detalle, tal como se ve en la siguiente imagen.

Puedes personalizar la fuente añadiendo variaciones, tal como se ve en la siguiente imagen

Además puedes agregar más de una familia o fuente, tal como se ve en la siguiente imagen en donde se añadió la fuente Roboto y Ubuntu.

2- Agregando archivo de estilos externo

En nuestro ejemplo anterior Google nos ha generado el siguiente código

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700" rel="stylesheet">

De este código sólo necesitamos la url con sus parámetros, es decir esta url:

https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700

 
Luego en tu archivo functions.php de tu theme puedes agregar el siguiente código:

add_action("wp_enqueue_scripts", "dcms_insertar_google_fonts");

function dcms_insertar_google_fonts(){
    $url = "https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700";
    wp_enqueue_style('google_fonts', $url);
 }

Lo que hace este código es registrar un nuevo archivo de estilos externo que es el que tiene la información para cargar la fuentes de Google que hemos configurado.

3- Modificaciones CSS

Ya incluiste el tipo de letra, ahora la puedes usar en tu sitio, esto a través de CSS.
Google también te proporciona las reglas CSS que puedes usar:

font-family: 'Roboto', sans-serif;
font-family: 'Ubuntu', sans-serif;

Sin embargo para asignar esto a tu theme tienes que incluirlas dentro de una clase CSS, por ejemplo:

.entry-title{
	font-family: 'Ubuntu', sans-serif;
}

.entry-content{
	font-family: 'Lato', sans-serif;
}

Conclusión

Google Fonts es un servicio que te permitirá incluir tipos de letras adicionales a tu sitio web, hay muchos plugins que te permiten realizar esto, pero si quieres mantener tu sitio liviano y no complicarte con la administración de plugins adicionales, puedes agregar las fuentes que necesites manualmente tal como has visto en este artículo.

Aún con dudas, en el siguiente video se detalla los puntos anteriores.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando…