El otro día durante la realización de un proyecto, el cliente me pasó una serie de tipografías que necesitaba para la web en WordPress, de modo que tenía que introducirlas en la plantilla para que las mostrase.

He de decir que hay algunos plugins como Use any font o Easy Google fonts pueden modificar las tipografías en WordPress, que si bien pueden resultar una solución rápida, yo prefiero utilizar código antes que plugins, sobre todo para cosas tan simples como esta. (Además de que este blog es de desarrollo)

Bueno, la cuestion es que vamos a hacerlo por medio de código.

Lo primero que necesitamos es una fuente, que se pueden bajar desde Google fonts o desde datafont, recomiendo estos sitios por obtener fuentes gratuitas.

Una vez que tenemos descargada la fuente, en este ejemplo vamos a utilizar obelix pro desde datafont (siempre he sido admirador de Asterix…), nos vamos a fontsquirrel, una web que nos permite subir la fuente, la convierte a todos los tipos óptimos para los navegadores y nos genera el código para insertarla en nuestra web por medio del css…

Yo suelo dejar la versión optimal. Además hay que marcar que sí a la política de de legalidad (pero cómo estamos usando una fuente gratuita no hay problema)

Con el archivo subido, tan solo tenemos que bajar nuestro kit de desarrollo para la fuente.

Truco: Podemos subir varios tipos de letra a la vez y se nos generará el código conjunto para toda ellas…

Al bajar nuestro kit, veremos que tenemos un zip con el siguiente contenido:

Aquí lo que nos interesa son los archivos de fuente y el stylesheet.

A mi me gusta que los archivos de las fuentes estén en la plantilla, de ese modo cuando hay que subirla, mudarla… es mucho mas sencillo que andar creando diferentes carpetas en la raíz de WordPress. Por ello creamos una carpeta dentro de nuestro tema que se llame por ejemplo fuentes, e introducimos ahí los archivos de las fuentes.

Ahora bien, si abrimos el archivo stylesheet.css, nos encontraremos un contenido similar a este:

@font-face {
    font-family: 'obelixproitalic';
    src: url('obelixproit-cyr-webfont.woff2') format('woff2'),
         url('obelixproit-cyr-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Lo único que tenemos que hacer es copiar este código e introducirlo en el archivo style.css de nuestro tema, pero está apuntando al directorio del tema, por lo que tenemos que cambiar las urls relativas de las tipografías, quedando así:

@font-face {
    font-family: 'obelixproitalic';
    src: url('./fuentes/obelixproit-cyr-webfont.woff2') format('woff2'),
         url('./fuentes/obelixproit-cyr-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Vemos que solo hemos cambiado la url de las tipografías, aunque aún no se pueden usar, para ello debemos de incluirla dentro de una clase o de una etiqueta de la siguiente forma:

.obelix{
    font-family: 'obelixproitalic', sans-serif;
}

Donde .obelix se cambiaría por el etiqueta o clase que queramos y al escribir obtendremos un resultado similar al siguiente:

Nota: puede ser que no estemos trabajando en un tema propio, por lo que no es recomendable utilizar no el estilo ni el directorio del tema, en cuyo caso recomiendo introducir el css dentro de un plugin como Simple custom CSS, introducir las fuentes en el directorio raíz de wordpress y utilizar urls absolutas, o bien utilizar un tema hijo para evitar las posibles actualizaciones del tema. 

Cómo podéis ver, cambiar las tipografías en WordPress, es muy sencillo y tan solo es necesario prestar atención a las urls para que las fuentes funcionen correctamente y debido a que estamos trabajando en el css .

Espero que os haya servido de ayuda y si os ha servido compartáis y comenteis.