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]- El método rápido: Plugins
- @font-face: Aloja tú las fuentes y llámalas con CSS
- A mano: Creando una función para llamar fuentes externas
- ¿Dónde consigo más fuentes?
[titulo]El método rápido: Plugins[/titulo]
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.
[titulo]@font-face: Aloja tú las fuentes y llámalas con CSS[/titulo]
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:
@font-face {
//Nombre por el que llamaremos a la fuente
font-family: 'loveloblack';
//Referencia de todo los formatos
src: url('/fuentes/lovelo_black-webfont.eot');
src: url('/fuentes/lovelo_black-webfont.eot?#iefix') format('embedded-opentype'),
url('/fuentes/lovelo_black-webfont.woff2') format('woff2'),
url('/fuentes/lovelo_black-webfont.woff') format('woff'),
url('/fuentes/lovelo_black-webfont.ttf') format('truetype'),
url('/fuentes/lovelo_black-webfont.svg#loveloblack') format('svg');
font-weight: normal;
font-style: normal;
}
Donde [codigo]loveloblack[/codigo] se sustituirá por el nombre que queramos darle a la fuente.
Y los [codigo]src[/codigo] y [codigo]url[/codigo] 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:
h1, h2, h3, h4{
font-family: 'loveloblack';
}
Y si los títulos ya tuviesen asignada una fuente distinta, o buscamos la línea y la sustituímos, o le añadimos [codigo]!important[/codigo] para darle prioridad a nuestra modificación:
h1, h2, h3, h4{
font-family: 'loveloblack'!important;
}
[titulo]A mano: Creando una función para llamar fuentes externas[/titulo]
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 [codigo]<link rel=»stylesheet» href=» «[/codigo], pero bien hecho.
1º Accedemos vía FTP y buscamos el archivo [codigo]functions.php[/codigo] de nuestro tema activo.
2º Lo editamos, o mejor aún, creamos un tema hijo, y añadimos la siguiente función:
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');
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:
[titulo]¿Dónde consigo más fuentes?[/titulo]
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!
Escribir comentario