Cómo puedo añadir una fuente de Google Fonts a mi WordPress

Por lo general, los themes de WordPress nos vienen con un tipo de fuente determinada y en muchas ocasiones necesitamos cambiarla por otra distinta que se adapte mejor a nuestro gusto o a las necesidades de nuestro diseño.

WordPress nos permite añadir fuentes desde cualquier repositorio en la red. Google Fonts es un repositorio que nos ofrece, gratuitamente, más de 900 familias de fuentes de diversos tipos. A buen seguro encontraremos alguna que se adapte a nuestro proyecto.

En este breve tutorial vamos ver los pasos que debemos dar para incorporar una nueva fuente a nuestra instalación de WordPress.

Elegir la fuente

Lo primero es elegir la fuente de entre el amplio catálogo que nos brinda este repositorio, para ello basta con que nos dirijamos al sitio web de Google Fonts y escojamos una.

Pantallazo de Google Fonts
Figura 1: Pantallazo de la web de Google Fonts

La web de Google Fonts tiene un aspecto como el que se muestra en la figura 1. Haciendo scroll se nos irán mostrando una tras otra las filas de tres fuentes cada una.

Supongamos que elegimos la que se muestra en la figura 2.

Fuente elegida
Figura 2: Fuente elegida

Observa que el texto que se encuentra en la figura 2 ha sido escrito por nosotros. Esta es una interesante facilidad que nos permite la web de Google Fonts. Para cambiarlo basta con hacer clic dentro del texto original y colocar el nuestro.

Al hacer clic sobre el circulo rojo indicado con un signo de más (+) hacemos una «preselección» de esta fuente y en la parte inferior de la web nos saldrá una barra como la que se nos muestra en la figura 3.

barra-familias-seleccionadas-min
Figura 3

Al hacer clic sobre la barra negra que aparece en la figura 3, se ampliará la ventana de selección de familias y adquirirá un aspecto como el que podemos apreciar en la figura 4.

Figura 4: Ventana de selección de familia desplegada

Llegados a este punto, hacemos clic sobre @IMPORT y debemos enfocarnos la línea central del código, porque esa es la que deberemos copiar en nuestro WordPress. Ver figura 5.

Figura 5: código CSS de importación de fuente

Importar la fuente a nuestro WordPress

Figura 6: Acceso al editor de temas

Aunque no es lo más recomendable, haremos los cambios de este ejemplo, mediante el editor de temas que incluye el propio WordPress. Para ello, desde el escritorio del panel de control haremos clic en «Apariencia» y después en «Editor de temas». Ver figura 6.

Figura 7: Editor de CSS de WordPress

En la figura 7 podemos apreciar, el archivo que tenemos que modificar: hoja de estilo (style.css). También hemos indicado el lugar en el que debemos pegar la línea de importación de fuente que remarcamos en la figura 5. Con esta acción, después de actualizar, ya tenemos la fuente añadida a nuestro WordPress y, por tanto, podremos utilizarla dónde la necesitemos. Eso será lo que expliquemos en el siguiente apartado.

Cómo cambiar de fuente en un párrafo o elemento de nuestro contenido

Para modificar la fuente vamos a utilizar, a modo de ejemplo, la creación de un párrafo dentro de un post.

Figura 8: Modificación de la fuente en un párrafo

En la figura 8, se muestra la edición de una entrada en la que vemos como asignamos una clase de CSS: cambio-fuente, al párrafo sobre el que queremos hacer el cambio.

Ahora vamos a añadir unas líneas de CSS en nuestro documento y para ello lo que haremos será entrar en el personalizador de WordPress y abrir el editor de CSS adicional.

Figura 9: Personalizador de WordPress

En la figura 9 vemos el código CSS que debemos incorporar para que el cambio de fuente se haga efectivo en el párrafo afectado por la clase «cambio-fuente».

font-family: 'Srisakdi', cursive;

El código anterior lo obtenemos de la propia web de Google Fonts. Ver figura 4.

Como ves, aunque puede parecer que el proceso es complicado por el número de acciones a realizar, en el fondo se trata de un procedimiento razonablemente sencillo, especialmente si se tiene cierta soltura en el manejo de CSS.

Ir arriba