Cambiar las fuentes en un tema WordPress

Ya estás preparado para empezar tu proyecto web en WordPress. Has planificado todo, tienes instalado WordPress y ya has encontrado un tema con un diseño que se adapta perfectamente a lo quieres. Solo hay un “pero” y es que la fuente que utiliza el tema no te acaba de convencer. Buscas en las opciones de personalización del tema pero no incluye ninguna opción para cambiar el tipo de fuente, solamente un botón te indica que al comprar la versión PRO se pueden hacer estas modificaciones.

Este es un caso muy común en los temas gratuitos, normalmente en los temas premium se incluyen funcionalidades para cambiar las fuentes del sitio y muchos ofrecen la posibilidad de poner diferentes fuentes entre los encabezados, los párrafos y el resto de textos de la web.

El problema de algunos temas premium y versiones PRO es que alguno pueden resultar pesados justamente por la cantidad de opciones que traen y no todos tienen un código bien optimizado. Una práctica muy común entre programadores WordPress es trabajar en base a un tema gratis, que resultan más ligeros, e ir customizando para poder darle cierto diseño o características, haciéndolo así podemos modificar la tipografía de WordPress sin tener que recurrir a una versión de pago.

La importancia de una fuente en el diseño web

La tipografía va a ser uno de los elementos más importantes de tu diseño web. Cada tipografía transmite una sensación o concepto, por lo que es fundamental tener claro cuál es el objetivo del mensaje gráfico.

Hay que pensar que la forma en que se expresa un mensaje tiene mucho peso dentro de la comunicación entre emisor y receptor. Por eso las fuentes se dividen en cuatro familias principales:

Serif
Se caracterizan por tener unos pequeños remates en los extremos de las letras, llamada Serif. Este tipo de letra tiene una buena legibilidad y por eso se usan habitualmente para textos de largo alcance como en los libros. Se relacionan sensaciones de clásico, tradicional o lujo.

Sin Serif
A diferencia de las Serif no presentan ningún tipo de serif. Su construcción está basada en formas geométricas y tienen una buena legibilidad. Este tipo de fuente se usa para transmitir conceptos como la modernidad y en algunos casos elegancia.

Rotuladas y fantasía
Este tipo de tipografías se aleja de las dos anteriores. Engloban mucho tipos cómo las script, que pretenden emular la escritura hecha a mano o las góticas que emulan el famoso estilo de escritura medieval. Su legibilidad es muy poca en textos largos y se usan principalmente para títulos.

Conceptos básicos para un buen uso de las fuentes en el diseño web

Legibilidad
En una web el usuario no lee todo el texto como si fuera un libro, lo que un usuario hace es un escaneo visual de nuestra web para más tarde leer aquello que le interesa o le ha llamado la atención. Por eso es importante utilizar una fuente con buena legibilidad, que facilite a primera vista identificar palabras sin tener que esforzarse.

Contraste
Además de elegir un buen tipo de letra, otro punto que afecta a la hora de facilitar la legibilidad al usuario es el contraste. Es fundamental encontrar una combinación en la cual la letra destaque del color de fondo, la combinación que mejor funciona es fondo blanco con letras negras o grises oscuras.

Jerarquía
Jerarquizar el texto permite al usuario rastrear los diferentes bloques de texto para encontrar las partes más importantes. Se trata de dar más tamaño a elementos como los titulares frente a los párrafos o jugar con diferentes grosores o colores para marcar los elementos en los que se quieres hacer más énfasis.

Cambiar las fuentes en un tema WordPress con plugin

Para cambiar las fuentes directamente desde WordPress podemos hacer uso del plugin Fonts Plugin | Google Fonts Typography. Este plugin freemium cuenta con más de 100,000 instalaciones activa y una media de 5 estrellas de valoración. Permite acceder a todas las fuentes de Google Fonts y poder ver en vivo la apariencia de las fuentes.

Para instalar el plugin dirígete a "Añadir Nuevo" dentro del panel de control WordPress y con el buscador localiza el plugin.

Una vez instalado se crea un nuevo acceso para personalizar las fuentes en "Apariencia > Personalizar".

El plugin ofrece una opción de configuración básica o una más avanzada.

Configuración básica
Esta configuración permite elegir una fuente diferente para el texto del cuerpo, los encabezados y los botones. Solo hay que seleccionar la fuente para cada elemento desde el desplegable correspondiente.

Configuración avanzada
Esta opción nos permite una configuración más completa. Además de poder seleccionar fuentes para el menú, contenido, sidebar o footer, también permite personalizar las fuentes de los encabezados dependiendo de si son h1, h2, h3…

Otras opciones que trae el plugin son:

Carga de fuentes
Permite no usar pesos de la fuente como negrita o cursiva para evitar ralentizar la web.

Depuración
Si no visualiza las fuentes en su sitio web se puede forzar la visualización con esta opción.

Cambiar las fuentes en un tema WordPress manualmente

Otra opción es no hacer uso de plugins y hacer los cambios mediante los archivos functions.php y style.css. Siempre es recomendable para hacer este tipo de cambios crear un tema hijo y así evitar perder los cambios cuando actualicemos en tema.

Una vez creado el tema hijo ve a la web de Google Fonts y selecciona la fuente que quieras usar. Desde el icono de fuentes seleccionadas haz clic en la opción Embed y copia el código <link> que verás. Un código similar a este:

De este código nos interesa esta parte https://fonts.googleapis.com/css?family=Raleway
Copia ese fragmento en un bloc de notas, ahora abre el archivo functions.php, añade estas líneas y pega el código anterior donde se indica

Después tendremos que incluir las fuentes en el archivo .css de la misma manera que incluimos cualquier fuente. Si tienes dudas a la hora de definir esta parte puedes ir a Google Fonts y en Embed, debajo del código del código <link>, se muestra un ejemplo de la regla CSS para mostrar la fuente.

En este caso Google Fonts añade una fuente de seguridad después de la fuente principal para mostrar en el caso de que por fallo en la conexión u otro imprevisto no se pueda mostrar la fuente seleccionada de Google Fonts.

Esto es todo.

Estoy seguro de que con este tutorial has podido cambiar las fuentes en tu tema WordPress. Recuerda la importancia de tener una tipografía que vaya acorde a las sensaciones que se quieren transmitir. Una buena elección puede ser clave para transmitir más profesionalidad y conseguir una web destacada dentro de tu sector.