CMS WordPress

[WordPress] Cómo instalar fuentes adicionales

[WordPress] Añadir tipografías personalizadas

Si utilizas un constructor visual tipo Divi o Visual Composer, habrás visto que traen muchas fuentes ya incluídas.  Lo mismo ocurre con muchos temas de renombre, como Avada, Enfold o BeTheme.

Pero si eso no es suficiente, y tu cliente o tú os habéis enamorado de una tipografía muy concreta, ¡Has llegado al lugar correcto! En este tutorial vamos a mostrarte cómo incluirla en cualquier instalación de WordPress.

Resumen de contenidos

  1. El método rápido: Plugins
  2. @font-face: Aloja tú las fuentes y llámalas con CSS
  3. A mano: Creando una función para llamar fuentes externas
  4. ¿Dónde consigo más fuentes?

 

El método rápido: Plugins

Si tienes prisa y quieres ser efectista, siempre hay un plugin que te salvará. En esta ocasión hay unos cuantos:

 

Use Any Font

Te permite subir las fuentes directamente desde tu ordenador. Así que si eres uno de esos diseñadores que, como yo, primero lo pasan todo por la mesa de dibujo, este plugin es perfecto.

Admite los siguientes formatos: ttf, otf, eot, woff, svg, dfont y suit.

¡Ojo! Al parecer, en una actualización de 2018 se volvió freemium, es decir que ahora únicamente te deja subir una fuente de manera gratuíta. Si necesitas subir más, debes solicitar una clave nueva y crear otra cuenta. O eso o pagar la licencia, claro.

 

Easy Google Fonts

Este plugin carga las fuentes direcamente desde la base de datos de Google Fonts. Esto quiere decir lo siguiente:

  • No importa que la fuente esté en tu ordenador, necesariamente debe estar en el repositorio de Google Fonts para poder cargarla. Pero no te preocupes, ahora mismo (2019) tiene 915 en su base de datos. Y un sistema que te permite sugerir fuentes similares en el caso de que la que necesites no la tengan disponible.
  • Las fuentes cargarán desde el servidor de Google, por lo que no ocuparán sitio en tu servidor y no tendrás problemas de incompatibilidades entre navegadores (Recordemos que algunos navegadores no soportan determinadas extensiones de fuentes).

 

WP Google Fonts

Plugin muy sencillo que sigue la lógica del anterior: Te permite agregar fuentes desde el repositorio de Google Fonts con una limitación de hasta 6 por página.

¿Por qué hasta 6? El exceso de fuentes no sólo queda ‘cutre’ sino que relentiza significativamente la carga de la página.

 

Typekit Fonts para WordPress

Sencillamente nos da la opción de poner código embebido para que podamos insertar llamadas de fuentes externas.

Además de ello, en otro cuadro, nos permite asignar esas llamadas a diferentes elementos a través de CSS. Por lo tanto, es una herramienta muy sencilla enfocada quizá para desarrolladores con prisa o sin accesos FTP.

 

@font-face: Aloja tú las fuentes y llámalas con CSS

Si tenemos la fuente instalada en nuestro ordenador o vamos a descargarla, podemos subirla al servidor vía FTP y vincularla con CSS.

Os recordamos que en el último apartado de esta entrada, se listarán webs donde se pueden descargar fuentes de manera gratuíta.

 

1º- Nos hacemos con la fuente:

  • Si ya está en nuestro ordenador, pasamos al siguiente paso.
  • Si la hubiésemos descargado, tendremos que hacer uso de una herramienta que nos convierta ese archivo a todos los formatos compatibles. De esa manera no tendremos problemas como que algún navegador no la lea. Os recomendamos utilizar el «Generator» de Font Squirrel.

 

2ºSubimos la fuente, con todas sus extensiones, a un directorio ya existente o creamos uno, por ejemplo, una carpeta llamada «fuentes» en la raiz de la instalación de WordPress. Si la teníamos instalada en el ordenador, al arrastrar esa fuente desde la carpeta fuentes al FTP, automáticamente nos subirá todas las extensiones.

3º Editamos la hoja de estilos de nuestro tema activo o creamos un child theme. En cualquier caso, añadimos lo siguiente:

Donde loveloblack se sustituirá por el nombre que queramos darle a la fuente.

Y los srcurl deben ser sustituídos por la ruta donde hayamos alojado los archivos. En nuestro ejemplo, carpeta «fuente» en la raíz de WordPress.

Es muy importante también, insistimos, en que nos fijemos que al servidor FTP se han subido, al menos, los formatos referenciados: eot, woff, truetype y svg.

 

Ahora sólo queda utilizarla. Por ejemplo, si queremos asignarla a los títulos:

Y si los títulos ya tuviesen asignada una fuente distinta, o buscamos la línea y la sustituímos, o le añadimos !important para darle prioridad a nuestra modificación:

 

A mano: Creando una función para llamar fuentes externas

Con esta otra opción también necesitaremos permisos FTP.

Lo que vamos a hacer va a ser, en esencia, añadir la llamada externa de una fuente a la ejecución de WordPress. Es decir, como si editásemos el código HTML de la web para añadir un  <link rel=»stylesheet» href=» «, pero bien hecho.

1º Accedemos vía FTP y buscamos el archivo functions.php de nuestro tema activo.

2º Lo editamos, o mejor aún, creamos un tema hijo, y añadimos la siguiente función:

Donde la url corresponde a la url de la fuente que deseemos insertar, facilitada por Google Fonts.

¡Guardamos y listo!

Ya sabéis que para usar fuentes de Google Fonts debéis seguir las instrucciones que allí se os indiquen:

 

¿Dónde consigo más fuentes?

A continuación te ofrecemos una selección de nuestras favoritas. Pero no olvides que en la red la cantidad de recursos ¡es casi ilimitada!

 

¿Conoces alguna más que crees que deberíamos añadir? ¡Compártela con nosotros en los comentarios!

 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario