En este post te enseño una funcionalidad muy útil para tu página web: instalar una tipografía o fuente personalizada a mano, sin necesidad de activar ningún plugin, y de forma muy muy sencilla.
Índice del artículo
¿Por qué instalar a mano una tipografía en tu página web?
Independientemente del tema o plantilla que uses, ya sea de pago o gratuita, seguramente habrás visto que hay una disponibilidad limitada de tipografías para usar en el diseño.
Hay temas que tienen un repositorio enorme, o incluso usan el repositorio de tipografías de Google, como por ejemplo Divi.
Sin embargo, aunque haya mucha variedad, puede que necesites instalar una distinta, personalizada. Puede que un diseñador gráfico haya diseñado una tipografía específica para ti, o puede que la que a ti te gusta sea premium o muy específica.
Sea cual sea el motivo, no la tienes en tu tema y quieres instalarla.
Pero me dirás, «va, hay plugins para todo, seguro que hay uno para instalar las tipografías». Pues sí, hay muchos plugins para esta funcionalidad, pero a día de hoy no he dado con uno que cumpla mis expectativas y esté bien de precio.
Por otro lado, se trata de una tarea bastante sencilla de hacer y no veo necesidad de instalar un plugin.
Y por último, por supuesto, ya sabes que soy partidaria siempre de ahorrar en plugins para tener una buena velocidad en nuestra página web, mantener solo los que utilicemos y funcionen bien, cuantos menos mejor. Por eso, si hay algo que podamos hacer a mano de forma bastante sencilla, ¿por qué instalar un plugin?
Pues bueno, vamos al meollo 😉
Paso a paso para instalar una fuente a mano en tu página web WordPress
Paso 1. Descarga, compra o consigue los archivos de la tipografía que quieres instalar
Lógicamente, para empezar tendrás que tener la tipografía que desees instalar. Como te comentaba antes, puede que sea que te la haya diseñado un diseñador gráfico, que la hayas comprado o que la hayas descargado de un repositorio gratuito.
En cualquiera de los casos, debes tener los archivos.
Si no sabes de donde puedes descargar tipografías gratis y de pago, te dejo algunos ejemplos de repositorios bastante completos:
En todos ellos puedes buscar y filtrar por estilos, puedes escribir una frase para ver cómo queda, etc.
Vale, pongamos por ejemplo que descargamos la tipografía «Lemon Milk» de DaFont.
Hacemos clic en el botón de Descargar y se nos descargará un .zip con todos los archivos de las distintas variaciones de la tipografía. En este ejemplo tenemos 8 variaciones: bold, bold italic, light, light italic, medium, medium italic, regular y regular italic.
Dentro de esta carpeta suele venir también un archivo «readme« en el que el autor explica para qué puedes usar la fuente, si solo para uso personal o también para uso profesional, etc. Además, a veces en este archivo, algunos autores son muy majos y te dejan el código css que debes usar para instalar la fuente en tu sitio web.
En nuestro ejemplo no hemos tenido esa suerte, pero no te preocupes, que el código te lo voy a enseñar yo 🙂
Paso 2. Sube todos los archivos de las variaciones de la tipografía a una carpeta en tu Hosting
A continuación, tenemos que subir los archivos a nuestro hosting, para luego poder «llamarlos» con el código CSS que insertaremos en nuestra web.
Para ello puedes utilizar Filezilla o el Administrador de archivos que use tu hosting.
Debes crear un directorio nuevo dentro de «public_html«, «html«, «www«… o donde tengas instalada tu página web, a la altura del resto de directorios de WordPress (wp-admin, wp-conten, wp-includes), al que llamaremos «fonts«.
Dentro de este nuevo directorio vas a crear otro directorio con el nombre de la fuente que has descargado (sin espacios ni eñes, ni tildes…, para que sea más fácil luego redactar el código css). En nuestro ejemplo, «LemonMilk«.
Dentro de este directorio vas a insertar todos los archivos de las variaciones de la tipografía que te has descargado. O mejor dicho, todas las variaciones que necesitas. Ya sabes, para mejorar la velocidad de carga de tu sitio y con ella el Posicionamiento SEO, menos es más, sube solo las variaciones de la tipografía que vayas a usar en tu sitio web.
Te dejo a continuación una captura de pantalla para que entiendas bien la estructura:
Paso 3. Inserta el código CSS en tu página web para «llamar» a tu fuente
Para finalizar, tenemos que decirle a nuestro WordPress que utilice esta fuente que acabamos de subir al servidor en los sitios donde queramos utilizarla. Para ello vamos a utilizar varios códigos css sencillos.
Puedes crear un tema hijo para insertar este código en el archivo style.css de tu tema, también puedes colocarlo directamente en este archivo de tu tema (no te lo recomiendo si no eres muy experto), o bien, puedes insertar el código en la sección que casi todas las plantillas y temas tienen de «Código CSS Personalizado«, para insertar, como su propio nombre indica, códigos css personalizados.
Si te leíste mi post sobre Cómo destacar un elemento del menú con CSS fue aquí, en el apartado de «CSS Personalizado» donde insertamos el código.
Pues bien, aquí, en primer lugar vamos a insertar un código para que el sitio web encuentre la tipografía, y lo repetiremos para cada variación de la tipografía, con su ubicación y nombre correspondientes. En nuestro caso, 8 variaciones:
/* Tipografía LemonMilk */
@font-face {
font-family: "Lemon Milk Bold";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-Bold.otf');
}
@font-face {
font-family: "Lemon Milk Bold Italic";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-BoldItalic.otf');
}
@font-face {
font-family: "Lemon Milk Light";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-Light.otf');
}
@font-face {
font-family: "Lemon Milk Light Italic";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-LightItalic.otf');
}
@font-face {
font-family: "Lemon Milk Medium";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-Medium.otf');
}
@font-face {
font-family: "Lemon Milk Medium Italic";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-MediumItalic.otf');
}
@font-face {
font-family: "Lemon Milk Regular";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-Regular.otf');
}
@font-face {
font-family: "Lemon Milk Regular Italic";
src: url('https://tusitioweb.com/fonts/LemonMilk/LEMONMILK-RegularItalic.otf');
}Recuerda sustituir «tusitioweb.com» por tu dominio, y el nombre y estilos de la tipografía cambiarlos por la tuya que hayas elegido, teniendo especial cuidado en poner exactamente el mismo nombre de archivo.
¡Genial, ya está! Nuestra página web ya sabe dónde está la tipografía y podemos usarla cuando queramos.
Ahora tenemos dos opciones, podemos insertar un nuevo código css aquí para que ciertas partes de la web usen ya esa tipografía, o podemos usarla individualmente donde queramos a través de una clase.
1. Si queremos, por ejemplo, que todos los títulos usen esta tipografía en negrita, el código a usar sería el siguiente:
h1,h2,h3,h4,h5,h6 {font-family: 'Lemon Milk Bold' !important;}2. Si dentro de un determinado texto, queremos que una frase tenga esta tipografía, le tendríamos que aplicar una clase:
<p class="ejemplo-negrita">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="ejemplo-regular-italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>Y después utilizar el siguiente código:
p.ejemplo-negrita {
font-family: "Lemon Milk Bold" !important;
}
p.ejemplo-regular-italic {
font-family: "Lemon Milk Regular Italic" !important;
}De nuevo, recuerda cambiar el nombre de la clase por el que desees.
Paso 4. Comprueba que sale la tipografía en la página web
Y por último nos quedaría comprobar que efectivamente funciona y hemos introducido correctamente la tipografía en nuestra página web.
Para ello vamos a utilizar la extensión de Google Chrome: WhatFont. Con esta herramienta vas a poder saber qué tipografía tiene un determinado texto.
Pues bien, siguiendo con nuestro ejemplo, este sería el resultado:
Como podemos comprobar, se ha instalado correctamente la fuente que queríamos en cada clase.
Y esto ha sido todo. Como ves algo bastante útil, para no tener que ceñirnos a las fuentes por defecto de nuestro tema, y muy fácil de hacer.
Cuéntame en los comentarios si has conseguido instalar tu tipografía o si conoces algún método más para poder hacerlo. ¡Te leo!
0 comentarios