tipografias wordpress

Cómo utilizar cualquier tipografía en tu wordpress

¿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:

 

Use Any Font

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.

 

Easy Google Fonts

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.

 

Typekit Fonts for WordPress

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:

Google fonts tipografía

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:

Google font import

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:

tipografías importadas

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.

tipografía importada wordpress

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.

  1. Pinchas en Upload Fonts
  2. Marcas la casilla como que estás de acuerdo en que las fuentes que estás utilizando puedes utilizarlas para web
  3. Haces clic en Download your kit

font squirrel

Se descargará un archivo zip con todo lo que vas a necesitar para tu web.

squirrel

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’.

directorio web

 

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:

codigo font face

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?

 

tipografias wordpress

 

 

Puedes compartir el post en:

2 comentarios en “Cómo utilizar cualquier tipografía en tu wordpress”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *