¿Cansad@ de las tipografías que aparecen por defecto en WordPress?
Cambiar la tipografía (a.k.a la fuente) utilizada en tu blog es bastante sencillo ¿Te animas a personalizarlo?
¿Cómo cambio la tipografía de mi web?
Te preguntarás….
Bien, básicamente hay dos formas:
- mediante un plugin
- mediante código
No te me asustes con lo del código que es mucho más sencillo de lo que parece.
Añadir la tipografía mediante un plugin
Hay muchísimos plugins que permiten añadir fuentes tipográficas a WordPress.
La ventaja de utilizar este método es que es súper sencillo y no tendrás que modificar nada del código.
La desventaja, la misma de siempre, cuantos más plugins tenga tu web WordPress, más lenta cargará…
Ejemplos de plugins que te permitirán añadir tipografías a tu WordPress:
Con este plugin puedes subir cualquier tipografía que tengas guardada en tu equipo y utilizarla en tu web.
Te aviso que, por ahora, no tiene traducción al español.
Este plugin utiliza las fuentes que tiene el directorio de Google, así que no tienes que descargártelas para volverlas a subir a tu web.
La pega es que utilizará exclusivamente las fuentes del susodicho directorio.
Este plugin es para los que utilizan el sistema de suscripción de Adobe Typekit.
Con este plugin también puedes utilizar las fuentes que contrates a través de WordPress de forma sencilla.
Añadir una tipografía a través de código
Volvemos a tener dos formas de hacerlo:
- si la fuente está en el directorio de Google Fonts
- si es una tipografía que hemos descargado en nuestro equipo
Cómo añadir una tipografía de Google Fonts
Bueno, como te decía el post de hace unas semanas tendrás que ir a la página de Google Fonts.
Buscas la tipografía que quieras utilizar y la seleccionas.
Pero en lugar de seguir los pasos para descargarla tendrás que utilizar los códigos que te proporciona la web.
Yo, por ejemplo, voy a utlizar para mi web la fuente Raleway.
Esto es lo que veo al seleccionarla:
Ahora nos encontramos con que hay dos formas de añadir estos códigos a tu página.
Puedes seleccionar el código que aparece bajo STANDARD, copiarlo y pegarlo en el código de tu plantilla dentro de la etiqueta <head>
o puedes pinchar en @IMPORT y verás esto:
copias sólo la línea @import url(‘….’);
y la pegas dentro del código de style.css.
Esto último es lo más fácil y más altamente recomendable, te enseño como.
Tienes que ir a Apariencia > Personalizar
Aquí verás tu página a la derecha y un menú a la izquierda, en el menú de la izquierda pincha en CSS adicional y aquí puedes pegar el código que has copiado antes.
Luego tendrás que especificar los bloques de texto que vas a querer con esa fuente.
Imagina que quieres que los títulos de tamaño 2 tengan esa tipografía, pues escribirías:
h2{
font-family: ‘Raleway’, sans-serif;
}
Para que te hagas una idea, te muestro un pantallazo, de mi propio blog:
Aquí he importado dos fuentes distintas, la Raley que se la he puesto a los títulos de los posts y la Montserrat Alternates que se la he puesto al contenido.
¿Quieres poner la misma tipografía en varios bloques de texto?
¡No hay problema! separa sus nomenclaturas con una coma, compartirán la misma fuente (o lo que les pongas en común), pero cada una guardará el resto de propiedades, como el tamaño, grosor, etc.
Cuando ya lo tengas, pinchas en publicar y voilà!
Cómo añadir cualquier otra tipografía externa a Google fonts.
Doy por hecho que la fuente ya la tienes descargada.
Este método es un poco más trabajado, así que paciencia, arremángate y ponte manos a la obra.
NOTA: Para añadirlas vamos a utilizar la regla @font-face y algunos navegadores antiguos no la soportan.
Para facilitar el proceso voy a utilizar la web de Font Squirel
Es muy sencillo, subes la fuente a la web y ella te genera el código.
Ese código generado es el que luego tendrás que copiar en tu archivo style.css.
Pero vamos por partes.
- Pinchas en Upload Fonts
- Marcas la casilla como que estás de acuerdo en que las fuentes que estás utilizando puedes utilizarlas para web
- Haces clic en Download your kit
Se descargará un archivo zip con todo lo que vas a necesitar para tu web.
Para utilizar la fuente necesitarás los archivos con extensión ttf y woff y el archivo css.
Los archivos .ttf y .woff son las fuentes que tendrás que subir a tu servidor, vía FTP (o del administrador de archivos de tu hosting) a una carpeta que te recomendaría que pusieses en el directorio raíz.
Llámala por ejemplo ‘Fuentes’.
Ahora viene la parte del código
El archivo css tiene el código que tendrás que añadir a tu style.css para que se vean esas fuentes.
Así que tendrás que abrir ese archivo css y verás algo similar a esto:
Solo te quedará adaptar la ruta de la url, a aquella de tu web donde están tus fuentes.
En este caso donde pone
src:(‘comfortaa-regular-webfont.woff2’)
le añadiras la ruta donde estan guardadas tus fuentes, en el ejemplo:
src:(‘https://jadewebs.com/fuentes/comfortaa-regular-webfont.woff2’)
Y ya tienes tu código listo para añadirlo a tu web.
¿Dónde?
Pues en el mismo sitio que antes:
Tienes que ir a Apariencia > Personalizar
En el menú de la izquierda pincha en CSS adicional y aquí puedes pegar el código que has copiado antes.
Una vez añadido el código del font-face, faltará como antes especificar a qué sección quieres aplicarle la tipografía.
Siguiendo este ejemplo, podrías poner un título h1 con la fuente que has añadido escribiendo:
h1 {font-family: ‘comfortaaregular‘}
La ventaja de añadir una tipografía a través de código es clara, utilizas un plugin menos, ergo tu página no se verá relentizada por ello.
Tal vez te de algo de miedo tocar el código, pero tampoco es una bomba ¿Te animas?
Gracias por la info!!! súper útil! Seguí así! 🙂
Gracias Paola =D