Si habéis entrado en este post es que os habéis cansado de la tipografía que viene por defecto en WordPress y hacéis bien. Para destacar entre los miles de millones de webs que existen, tenemos que ser diferentes así que el post de hoy va sobre cómo añadir fuentes personalizadas a nuestra web de WordPress sin morir en el intento.

Las fuentes son una parte importante del diseño de nuestra web e incluso puede ayudarnos a definir nuestra marca. Aunque ahora tampoco os penséis que deberíais utilizar la tipografía de vuestro logotipo para crear vuestra web entera. No. Dejad de pensar esto. Podéis utilizarla para destacar ciertas cosas pero NO para toda la web.

Si sois seguidores de este blog, ya sabéis que con los maquetadores visuales actuales podemos personalizar mucho nuestra web de WordPress, pero cuando hablamos de letras tenemos que saber que WordPress está limitado por fuentes propias. Para hacerlo sólo tendréis que seguir esta guía paso a paso sobre cómo añadir fuentes personalizadas a nuestra web de WordPress.

NOTA: antes de que sigáis leyendo, os advierto que este post utilizaremos un plugin gratuito que utiliza fuentes de Google. Así es, el macroimperio Google también cuenta con un servicio de tipografías propias llamado Google Fonts que nos da acceso a cientos de fuentes personalizadas y gratuitas. Sí, como habéis oído: gratuitas.

¿Cómo añadir tipografías a tu WordPress? 

La mayoría de desarrolladores de sitios web utilizan Google Fonts porqué son fiables y, por supuesto, ¡No hay que pagar nada! Así que, si estáis leyendo esto con la intención de instalar fuentes que no sean de Google, lo siento pero este post no es el indicado ?

Descargar el plugin Easy Google Fonts

Existen muchas maneras de añadir fuentes de Google a nuestra página web, pero este post va dirigido a usuarios que no quieran o no sepas tocar el código, así que es apto para todos. Y, como ya sabéis, si no queremos codificar, ¿cómo lo haremos? Exactamente, con un plugin o complemento.

Personalmente, me encanta este plugin, no sólo porque es fácil de usar, sino que además viene con toneladas de características como, por ejemplo, la vista previa en tiempo real. Esto nos ayuda a modificar el diseño y ver cómo queda al momento. Además, el plugin también incluye controles personalizados de fuente, posibilidad de agrupar varias fuentes y mucho más, ya veréis. Y todo ello, como ya os he dicho, sin tener ningún tipo de habilidad en codificación.

Bueno, volvemos al paso a paso. Iniciaremos sesión en nuestro Panel de WordPress (ya sabéis: vuestraweb.loquesea/wp-admin), nos dirigiremos al apartado Plugins y a la opción  Añadir nuevo. Como usuarios de WordPress ya sabéis que existen complementos que encontraremos en la galería de plugins y otros que tenemos que descargarnos de las páginas propias de desarrolladores. En este caso,  el Easy Google Fonts está en la galería de plugins de WordPress así que con sólo escribir el nombre en el apartado de búsqueda nos aparecerá.

Una vez localizado, lo instalaremos y, después de eso, lo activaremos.

Crear un control de fuente

En nuestro panel, en el apartado Configuración encontraremos el subapartado ‘Fuentes de Google’ y nos aparecerá lo siguiente:

Crearemos un nuevo ‘control de fuente’ con el que después accederemos a la personalización. Nos pedirá que lo nombremos así que ponedle el nombre que queráis. Después de eso, haremos clic en Crear control de fuente.

Una vez creado, tendremos que asegurarnos de marcar la opción de Forzar anulación de estilos, la cual hará que nuestro tema de WordPress utilice las fuentes que se definan en este complemento.

Como veréis, este paso es muy simple, así que ahora entramos a toquetear nuestras fuentes.

Personalizar las fuentes en nuestra web de WordPress

Una vez creado el control de fuente, tendremos que dirigirnos al apartado Apariencia > Personalizar desde el panel principal. Este panel seguramente ya lo tengáis visto, es donde tenemos que poner el logo de nuestra página, entre otras opciones.

Si ya hemos entrado en este panel, veremos que se ha creado una nueva opción de personalización llamada Tipography.

Haremos clic en esta nueva opción para explorar todas las configuraciones. Escogeremos el control de fuente que hemos creado previamente y personalizaremos la fuente como queramos. Como estáis viendo, si queréis de nuevo volver a cambiar toda la personalización de la web, habrá que crear otro control de fuente y volver a empezar a partir del paso que seguimos ahora mismo.

Como os he comentado al principio del post, una de las cosas que más me gusta de este plugin es su vista previa en tiempo real de todos los cambios, algo que nos facilitará mucho el trabajo y nos dará pie a jugar con las fuentes y ver qué combinación nos encaja más con el diseño de web que queremos tener. Pero no os preocupéis, porque aunque podamos ver los cambios a tiempo real, estos no se aplican hasta que nosotros le demos el ok.

En este apartado de Tipography, con el control de fuente que hemos creado podemos ver todas las opciones disponibles según cada encabezado (desde H1 a H6) y párrafo. Dichas opciones son las siguientes: Estilos (Styles), Apariencia (Appareance) y Posicionamiento (Positioning).

En la pestaña de Estilos podemos escoger entre más de 600 fuentes disponibles de Google. Y una vez escogida la fuente, podremos elegir familia (negrita, cursiva,…), la decoración (subrayado, tachado,…) e incluso transformar todo el texto en mayúscula o minúscula.

En la opción Apariencia que he comentado antes podremos escoger colores, tamaños, interlineado o separación entre letras. Mientras que en el último apartado, el de Posicionamiento, nos servirá para delimitar los márgenes, marcos y bordes, entre otros, que nos encajen más.

Una vez tengamos la fuente personalizada creada y asegurada, sólo habrá que clicar en el botón Guardar y Publicar que encontraremos en la esquina superior de la página. Y no os preocupéis, si queréis volver a las opciones iniciales de tipografía sólo tendremos que clicar en el botón ‘Restablecer texto’.

Conclusión

Como veis, hay miles de opciones para personalizar las fuentes que queremos en nuestra web con este plugin. Pero antes de que empecéis a jugar con diferentes letras y opciones, también tengo que recomendaros que en una página web no es recomendable tener más de 2 estilos de fuentes diferentes en la web.

Esto no sólo hará que nuestro lector tenga una mala primera impresión, que nuestra página se vea desordenada y, lo más importante, hará que se ralentice la web y eso no nos interesa. Ya lo dije en su día y no me cansaré de repetirlo, la velocidad de carga de nuestra página es muy importante, repasad siempre que queráis el post de ¿Cómo medir la velocidad de carga de tu web?

¡Y hasta aquí este pequeño tutorial sobre cómo añadir fuentes personalizada a nuestra web de WordPress! Espero que os haya ayudado y que, como siempre, si tenéis algún comentario podéis dejarlo a continuación y compartir esta publicación en vuestras redes sociales.

Y si tenéis alguna duda en general sobre WordPress y queréis que hable más a fondo sobre ello, contactadme. Vuestras peticiones son órdenes para mí.