Cuando estamos diseñando una web con WordPress, uno de los puntos esenciales es la elección de una fuente adecuada. Y en muchas ocasiones, raro es que el tema que tengamos activado y sobre el que vamos a trabajar en nuestro diseño tiene la fuente, o la combinación de fuentes, que tenemos en nuestra mente para levantar nuestro proyecto. En estos casos, WordPress dispone de multitud de plugins para añadir fuentes de forma sencilla. Pero en esta ocasión vamos a pasar de plugins, y queremos enseñaros la manera de poder albergar de forma local en nuestra instalación de WordPress cualquier fuente, sin necesidad de plugins.
Pero no solo nos va a servir para personalizar un tema que tengamos instalado. Si estamos creando nuestro propio tema en WordPress, es la forma ideal de poder incluir cualquier forma que queramos, y que le aparezca al usuario final en su editor para que pueda usarla con normalidad. Además, tener las fuentes guardadas de forma local en WordPress nos ofrecen varias ventajas que quizás puedan interesarte:
- No dependemos de servidores externos como Google Fonts. Al tener el archivo con las fuentes dentro de nuestra propia instalación, no hay que hacer ninguna llamada externa para que estas se carguen al entrar en nuestra web. Y en la mayoría de las ocasiones, va a dar más velocidad a nuestra web.
- Como no vamos a usar plugins, también es una carga menos que le vamos a meter a WordPress
- Desde WordPress 6.0, añadir fuentes de forma local es mucho más sencillo que nunca gracias a la Web Fonts API, así que vamos a aprovechar esta nueva característica que nos ofrece
En el tutorial de este artículo vamos a utilizar como el tema Twenty Twenty-Three incluido en la última actualización de WordPress. Así, también vamos a ver como es la organización de carpetas en un tema WordPress moderno. No tardemos más y empecemos por el principio, que es buscar y descargar la fuentes que queramos usar en nuestro diseño.
Paso 1: Elige y descarga tus fuentes
Podemos encontrar multitud de webs y repositorios online donde poder descargar fuentes. Desde Google Fonts, Bunny Fonts o Adobe Fonts como sitios exclusivos de tipografías, hasta otras webs de diseño más generalistas, como Behance. O incluso en el propio Github muchos usuarios suben las fuentes que han creado. Para este ejemplo quiero usar las fuentes Poppins y Montserrat, dos de las más populares en Google Fonts. Así que es tan sencillo como ir a su web y descargar un .zip con todos los archivos necesarios. Eso sí, antes de continuar, vamos a hacer algunas de puntualizaciones.
Fuentes y sus estilos
Cuando vamos a la página de una fuente cualquiera en Google Fonts, vemos como nos aparece un listado con todos los estilos diferentes disponibles para esa fuente. Normalmente estos estilos se refieren a su grosor (o font weight), o si es normal o cursiva.
Si nos fijamos bien, cada tipo de grosor (light, medium, regular…) va asociado a un valor (300, 400, 500…). Es importante tener en mente esta equivalencia entre tipo e grosor y su valor, porque es la que va a utilizar WordPress también.
Si no enlazamos bien el archivo con cierto tipo de grosor con su valor, cuando el usuario elija un grosor no le va a mostrar el estilo correcto. Aquí tenéis una tabla con las equivalencias entre el nombre del estilo de grosor y su valor, y que podéis mirar en caso de duda.
Atención al tipo de archivo de nuestras fuentes
Cuando descargamos una tipografía de una web, nos la pueden dar en formatos muy diferentes. Las que he descargado de Google Fonts, Poppins y Montserrat, están en formato ttf. Pero podemos encontrar otros diferentes como .ttf, .otf, .woff, .woff2… En principio, WordPress nos va a reconocer cualquiera de ellos pero, personalmente, os recomiendo usar .woff o .woff2 (aunque este último con cuidado por su compatibilidad), ya que son formatos comprimidos y pensados para la web, y que por regla general se van a cargar más rápido. De forma sencilla puedes encontrar conversores de .ttf a .woff, pero si prefieres usar el primer formato en tu proyecto, no vas a tener ningún problema.
Fuentes variables
No es casual que haya escogido la fuentes Poppins y Montserrat, ya que nos van a permitir hablar de un tema interesante, como son las fuentes variables. Cuando descargues Poppins de Google Fonts, verás como en el zip hay múltiple archivos .ttf, cada uno de ellos con un estilo diferente. Pero con Montserrat tendremos, además de una carpeta también con estos múltiples archivos, dos archivos .ttf más con su versión fuente variable. Un archivo alberga todos los tipos de grosores de Montserrat en su versión normal, y el otro todos los grosores en versión italic. WordPress nos va a permitir usar tantos los archivos de fuentes clásicas como las variables, así que podemos elegir la que queramos. Más adelante veremos como hacerlo con cada una de ellas.
Paso 2: Copia las fuentes dentro de WordPress
Una vez tengamos las fuentes descargadas en nuestro ordenador, vamos a subirlas a WordPress. Tanto si estáis trabajando en local como si tenéis la web en un hosting externo, la carpeta donde vamos a colocar los archivos de las fuentes va a ser el mismo.
Vamos a irnos a la carpeta donde esté alojado el tema donde queramos añadir la fuente. Aquí dentro, buscaremos la carpeta assets, y dentro de ella la carpeta fonts. Si no vemos estas carpetas porque, por ejemplo, estemos con un tema hijo, las podemos crear sin problemas. Ya dentro de la carpeta fonts y por temas de orden, podemos crear otra carpeta con el nombre de la fuente que vamos a alojar en nuestro WordPress. Esto nos va a ayudar si queremos tener varias fuentes en nuestro WordPress, ya sea ahora o en el futuro, y que cada una de ellas esté en su carpeta correspondiente y no todas mezcladas dentro de un mismo sitio.
En nuestro caso, dentro de la carpeta fonts creamos una carpeta llamada poppins y otra montserrat. En la carpeta poppins pegamos los 18 archivos .ttf que hemos venían dentro del .zip descargado desde Google Fonts, ya que pretendemos usarlos todos. Si en vuestro caso solo vais a usar unos estilos concretos, no es necesario que copies todos, solo los estilos que vayáis a usar en el proyecto. Con respecto a la carpeta montserrat, voy a pegar los dos archivos de fuentes variables, así vemos también como añadir esta clase de fuente a WordPress
Bien, ya tenemos nuestras fuentes dentro del directorio de archivos. A continuación, le diremos a WordPress que las hemos colocado ahí y cuales son sus estilos para que nos la reconozca, y se puedan usar en el editor.
Paso 3: Añade las fuentes a tu theme.json
El archivo theme.json los podemos encontrar en la carpeta raíz de nuestro tema. Eso sí, antes de abrirlo y empezar a escribir en él, haremos una copia de seguridad del archivo, por si acaso hacemos algo mal sin querer y queremos volver a los ajustes iniciales con facilidad. Si como en el paso anterior, estamos trabajando con un tema hijo, es posible que no tengamos un archivo theme.json dentro de la carpeta del tema, por lo que lo creamos nosotros.
Una vez tenemos el archivo theme.json, buscamos la sección settings, y dentro de ella el apartado fontFamilies. O si hemos creado el theme.json, lo escribimos nosotros mismos. En nuestro caso, como estamos trabajando sobre en Twenty Twenty-Three, podremos ver que aquí se encuentra todo el código que hace que WordPress reconozca las fuentes de este tema, como DM Sans, Inter o IBM Plex Mono. Si nos fijamos en la estructura del código, podemos ir descubriendo casi de forma intuitiva como podemos hacer lo mismo para añadir nuestra fuente. Aunque de todos modos, vamos paso a paso explicado para que sirve cada línea.
En primer lugar, añadimos el apartado «fontFace» bajo fontFamilies. Cada apartado «fontFace» va a albergar una fuente diferente. Por ejemplo, si queremos añadir la fuente Roboto y la fuente Pacifico, cada una de ellas va en un «fontFace» diferente. Dentro de «fontFace» vamos a crear diferentes apartados, donde en cada uno de ellos vamos a definir un estilo diferente de una fuentes y su localización en diferentes líneas. Veamos cuales son:
- «fontFamily» – aquí designamos el nombre de la fuentes.
- «fontStretch» – decimos si estamos con una versión normal, condensada o expandida de la fuente.
- «fontStyle» – si tiene un estilo normal o en cursiva (italic).
- «fontWeight» – el grosor de nuestra fuente, expresado en números. Estos valores son los que vimos en el primer paso, que van de 100 al más fino hasta 900 el más grueso.
- «src» – es la localización del archivo de la fuente dentro del directorio de WordPress.
Tras esta explicación, veamos como queda nuestro código si quiero añadir la fuente Poppins, en sus estilos light y light italic
Pues tal como hemos hecho con estos dos estilos de Poppins, habrá que hacerlo con todos los que queramos añadir de esta fuente. Podemos ir copiando y pegando cada trozo de código, e ir cambiando los valores para ajustarlo a cada estilo y poner de forma correcta donde esta su archivo. Si te fijas, al final hemos añadido tres líneas más, que no son mas que nada que el nombre de la familia de la fuente, el nombre que queremos darle en WordPress y su slug, que siempre debe ser único.
Ya sabemos como añadir el código en el caso de una fuente con muchos archivos, cada uno de un estilo diferente. ¿Pero qué hacemos si queremos añadir una fuente variable?. Pues aun más sencillo. Veamos el código resultante en el caso de la fuente variable Montserrat:
Vemos que es exactamente igual que con una fuente clásica, solo que en vez de un valor único en «fontWeight», le damos el rango completo de los grosores disponibles. Si tenemos nueve grosores diferentes, con una fuente variable no habrá que escribir nueve trozos de código por cada grosor, con el consiguiente ahorro de tiempo.
Pues una vez hayamos escrito nuestro código y guardado los archivos, podemos volver al editor de WordPress y veremos como ya nos aparecen nuestra nuevas fuentes Poppins y Montserrat, listas para que las podamos usar.
Conclusiones
Aunque al principio puede parecer un proceso algo complejo, una vez entendemos los pasos que tenemos que dar, donde situar los archivos de fuentes y el código a escribir, añadir una fuente de forma local en WordPress se va a convertir en algo natural cada vez que creemos un tema en WordPress, o simplemente queramos personalizar el que ya tengamos activado. Y todo ello sin tener que recurrir a plugins de terceros, teniendo así una instalación lo más limpia posible.
Además, como vamos a tener el propio archivo de la fuente dentro de WordPress, no dependemos de servicios de terceros como Google Fonts para conectarnos a sus servidores y que nos carguen los estilos. Todo va a estar en nuestro servidor, con la consiguiente rapidez de carga al no tener que hacer llamadas externas.
Y con esto terminamos por hoy. Esperamos que os haya sido de utilidad y que gracias a este pequeño tutorial podáis dar un paso más allá en la personalización de vuestro WordPress en el ámbito de las tipografías. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias con WordPress y las fuentes.
