Cómo añadir una fuente personalizada en WordPress

Resumen

Este artículo trata sobre cómo añadir una tipo de letra personalizado a tu sitio web de WordPress, ya sea que la tengas como archivo (otf, ttf, woff, etc.) o que quieras añadir una fuente de Google o Adobe.

Tener varias fuentes es genial

Muchos diseños modernos utilizan una combinación de dos fuentes para darle un toque especial. Es una forma fantástica de mejorar tu diseño y hacerlo más atractivo. También hay muchos artículos que recomiendan diferentes combinaciones de fuentes. Personalmente, creo que lo mejor es elegir algunas fuentes seguras para web que ofrezcan una buena experiencia de lectura, más información al respecto aquí, y algunas fuentes épicas para los titulares o la sección principal.

Añadir una fuente desde un archivo

Por suerte, existe un plugin maravilloso que te permite subir tu fuente a WordPress y utilizarla como quieras. Se llama Use Any Font.(https://wordpress.org/plugins/use-any-font/).

El plugin asegura que convertirá tu fuente a un formato de archivo llamado .woff2. Personalmente, prefiero convertirla antes y subirla en este formato. Y, por supuesto, ese es el formato necesario para poder utilizar la fuente en tu sitio web. Puedes convertirla antes, por ejemplo, con este convertidor gratis.

Cómo utilizar «Use Any Font»

Después de instalar y activar el plugin, debes generar y verificar una clave API. Para ello, solo tienes que hacer clic en los botones «Generate Free Lite / Test API Key» (Generar clave API Lite / de prueba gratuita) y, a continuación, en «Verify» (Verificar). Muy fácil.

A continuación, tienes que subir tu fuente. Sorpresa, lo haces en la sección «Upload Font». Primero, ponle un nombre, no importa cuál, que sea sencillo. Te recomiendo que utilices solo caracteres en minúscula, sin números, sin caracteres especiales y sin espacios.

Por último, tienes que indicarle al plugin dónde utilizar esta fuente. De nuevo, sorprendentemente, esto se hace en la sección «Assign Font». Solo tienes que pulsar el botón «Assign Font» situado a la derecha. Esto te permite seleccionar algunos elementos HTML, como los encabezados o incluso todo el cuerpo. También hay algunas partes especiales, como «Identidad del sitio», pero dependiendo de tu tema, es posible que no funcionen.

En caso de que esa selección no funcione, puedes utilizar las clases de tu tema. Para encontrar la clase correcta, debes utilizar el modo desarrollador de tu navegador. He explicado un poco sobre esto en este video tutorial CSS. Aquí tienes algunas clases del tema Minimalio que podrían ser lo que estás buscando.

Clases para el tema Minimalio

Logotipo / Identidad del sitio web – .header__brand
Menú principal – .header__menu
Blog / Categorías de filtrado del portfolio – .posts-ajax__categories
Blog / Encabezado de tarjeta de portfolio – .post-card__heading
Título de la página/entrada – .entry-title

¡Siempre hay que poner el punto antes de la clase!

Así que este sería el resultado, aquí estoy usando la fuente telegraf que he subido.

Añadir una fuente de Google Fonts

En primer lugar, muchos temas, incluidos Minimalio ya vienen con fuentes de Google. Así que si estás utilizando Minimalio, esto es solo para ti, si quieres utilizar más de una fuente de Google.

Tenemos que empezar importando la fuente al sitio web. Hay dos opciones para hacerlo: añadir el enlace al elemento HTML <head> o, para hacerlo en WordPress, descargar un plugin. Para evitarlo, vamos a utilizar el otro método, con CSS.

Busca la fuente que deseas, haz clic en «Obtener fuente». A continuación, haz clic en «Obtener código de inserción» y selecciona el botón «@import».

Primero, añade la regla de importación a tu CSS adicional (Opciones del tema -> CSS adicional). Puedes echar un vistazo aquí. video tutorial CSS para ver dónde encontrarlo. Después de copiar y pegar la regla de importación, debes asignar la fuente a una clase y elegir el grosor de la fuente. Así podrás utilizar las clases mencionadas anteriormente para el tema Minimalio. Por ejemplo:

Añadir fuentes de Adobe

Con las fuentes de Adobe, el proceso es igual que con las fuentes de Google. Solo que es más difícil encontrar el código de importación adecuado. En primer lugar, necesitas una cuenta de Adobe. Además, algunas fuentes no se pueden utilizar de esta manera. Pero con Roboto, por ejemplo, tienes que utilizar el botón «Añadir al proyecto web». A continuación, crea un proyecto. Después, haz clic en «@import» y llegarás a esta página:

De nuevo, tienes que añadir el código a tu CSS adicional (Opciones de tema -> CSS adicional). Puedes echar un vistazo a este vídeo tutorial sobre CSS para ver dónde encontrarlo y, de nuevo, utiliza una clase CSS para asignar la fuente. Este debería ser el resultado: