Cómo añadir más fuentes a tu WordPress

En muchísimos de mis cursos y proyectos con clientes me plantean la misma pregunta ¿cómo puedo añadir otra fuente a la que trae mi tema de wordpress? y aunque hay varias respuestas posibles, te comparto a continuación el método más adecuado desde mi punto de vista de friki de la optimización del rendimiento de WordPress.

Cada vez es más frecuente que los megatemas (esos temas mastodónticos con muchísimas opciones de configuración, como Divi, por ejemplo) traigan un buen surtido de fuentes disponibles para tu web. La verdad es que es muy cómodo y rápido para trabajar. Sin embargo no importa cuántas fuentes traiga, tu cliente siempre querrá una que no esta. Matemático, como decía mi padre.

Plugins para añadir fuentes a WordPress

Existen algunos plugins como Use any font que te permite instalar cualquier fuente tipográfica (solo una en la versión gratuita) o Easy Google Fonts que te permite activar cualquier fuente del repositorio de Google Fonts.

Por desgracia Use any font se me queda corto en su versión gratuita ya que es natural requerir una fuente distinta para el cuerpo y otra para los títulos, lo que nos obliga a ir a la versión de pago. Destaco que afecta muy poquito al rendimiento de tu sitio, lo que es de agradecer.

Por otra parte Easy Google Fonts sobrecarga algo más que Use any Font tu página web (nada escandaloso, no creas), por lo que la mejor opción desde mi punto de vista es tirar de un poquito de código. Que no se le caigan los anillos a nadie todavía, vamos a verlo paso a paso.

En este post del blog de Arturo García tienes un análisis extendido de ambas opciones.

ACTUALIZACIÓN 2018: Aunque el plugin Use any font solo permite instalar una fuente en su versión gratuita, si no nos gusta cómo queda, podemos hacer otra pruebap regenerando la clave API usando los mismos datos de contacto que la primera vez. Cambiando la clave API en los ajustes del plugin se eliminará la fuente anterior y podremos subir otra nueva fuente (única).
Esta actualización surge como consecuencia de una duda planteada en los foros de soporte de WordPress España.

Insertar una nueva fuente mediante código a WordPress

El primer paso es darnos una vuelta por Google Fonts y buscar la fuente más adecuada. Como ‘solo’ hay 821 y subiendo, te recomiendo usar los filtros para descartar de un plumazo las que menos te interesen. Como mínimo ya sabrás si te interesa con serifa o sin serifa y probablemente si te importa conservar la vista de tus lectores prefieras descartar las ‘handwriting’ (esas tipos que parecen escritas a mano).

En cualquier caso deberás darle un buen repaso a unas cuantas tipografías hasta que encuentres la que más te guste.

Una vez que lo hagas, deberás añadirla a tu cesta con el botón rojo con un símbolo de + para seleccionar esa familia. Ten en cuenta cuando lo hagas que en la cesta tienes una opción de Customize para seleccionar las subfamilias (negrita, cursiva y demás) y el lenguaje para que el vas a usarla.

Si necesitas más de una repite el proceso para añadir la segunda fuente a tu cesta (o todas las que necesites), pero fíjate en que tienes un indicador que te va advirtiendo de la afección a la velocidad de carga de tu sitio que tendrá tu elección. Trata de mantenerlo en verde a toda costa.

Ahora vuelve a la pestaña EMBED de tu cesta y comprobarás que te indica el código que deberemos usar en la web para importar esa fuente.

Aunque esta parte de la inserción del código se puede hacer de varias formas, la que más me gusta a mi es mediante la creación de una nueva función en el fichero functions.php de tu tema.

Debemos destacar que esto implica que si cambiamos de tema (y por tanto entra en juego otro functions.php) perderemos las fuentes importadas. No parece muy dramático, un cambio de tema y por tanto de estilo de la web, casi seguro que implique un cambio de tipos, pero para que nadie se lleve un disgusto.

Si esto supone un problema y no te apetece andar editando el functions.php de cada tema que instales, puedes crear tu propio plugin con todos las aportaciones al funtions.php que te interesen mantener en todo momento

Como decía, vamos a localizar nuestro functions.php bien:

• por ftp en la carpeta wp-content/themes/tu-tema/
• a través del escritorio de WordPress en Apariencia > Editor y donde abriremos dicho fichero

En el primer caso usaremos un editor de código (el mismísimo bloc de notas nos vale), en el segundo editaremos directamente el fichero.

Como siempre, es importante hacer una copia de seguridad de functions.php porque cualquier error tirará nuestra página a bajo y no quedará más remedio que acceder por ftp para reinstalar una copia anterior o modificar los errores en el código.

A partir del código que nos ha dado Google Fonts, por ejemplo el siguiente para la tipografía Unna Bold 700:

<link href="https://fonts.googleapis.com/css?family=Unna:700" rel="stylesheet">

nosotros vamos a crear nuestra función que se llamará load_fonts y su hook correspondiente:

function load_fonts() {
wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Unna:700');
wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts', 'load_fonts');

Con esto la nueva fuente ya está cargada en el sistema y solo necesitamos asociarla con el estilo correspondiente.

Para ello tendremos que recurrir a modificar directamente la hoja de estilos de nuestro sitio en Apariencia > Editor > style.css , o bien sobrescribir algún estilo determinado mediante Apariencia > Personalizar > CSS Adicional.

Las posibilidades en este punto son infinitas, pero si quisiéramos usar la fuente del ejemplo anterior en los títulos de todas las páginas de nuestro sitio, y teniendo en cuenta que google fonts ya nos informó de las reglas CSS necesarias:

font-family: 'Unna', serif;

el código a añadir a nuestro tema podría ser algo así como:

/*Títulos con fuente Unna*/
h1 {
font-family: 'Unna', serif;
}

Y así para todos los cambios que queramos realizar.

Ten en cuenta que cuanto más complejo sea el tema que estés usando en tu WordPress, más estilos pueden estar entrando en juego y puede ser que identificar todas las etiquetas sea laborioso. Para ello las herramientas de inspección de tu navegador pueden ser de gran ayuda.

Una última recomendación, comprueba que las fuentes que uses en tu sitio sean accesibles, que cualquier usuario y en cualquier dispositivo puedan leerlas correctamente sin dificultad. Te será de gran ayuda para optimizar la experiencia de usuario y el rendimiento de tu sitio.