Ya sea porque el Diseño lo amerita o porque es una petición puntual del cliente. En mas de una ocasión tendremos la necesidad de utilizar una Tipografía que no se encuentra dentro del repertorio de WordPress. Para ello te presento las siguientes soluciones:

Plugins de Tipografias Personalizadas para WordPress.

La forma mas sencilla de utilizar Fuentes Personalizadas en WordPress es mediante los Plugins. A continuación te muestro los mejores:

WP Google Fonts.

El Plugin WP Google Fonts es uno de los plugins mas populares para aumentar el repertorio de fuentes de Tipografía en nuestra instalación de WordPress.

La instalación de este sencillo plugin proveerá a nuestro WordPress mas de 700 fuentes Tipográficas listas para ser utilizadas con tan solo un par de clics.

Es importante recordar que si utilizamos una Tipografía Personalizada nuestro WordPress puede cargar mas lento. Por lo que es requerido realizar una optimizacion del mismo para no perjudicar nuestro SEO On Page.

Custom Fonts.

En ocasiones puede que las mas de 700 fuentes de Google Fonts no sean la solución. Debido a que la Tipografía que deseamos utilizar no se encuentra incluida dentro de Google Fonts o porque es una creación propia.

En estos casos (como el mío) el mejor Plugin es Custom Fonts.

Este plugin a diferencia del anterior nos permite cargar de forma directa a nuestro WordPress una Fuente Tipográfica Personalizada en formato woff, woff2, ttf, eot, otf, svg.

En lo personal el tipo de fuente que mejor se adapta es el «otf». De forma que si al cargar una nueva Fuente Tipográfica te da problemas al momento de visualizar la web, la solución suele ser convertir la Tipografía en formato «otf».

Para utilizar este plugin, basta con instalarlo desde el repertorio de plugins de WordPress y luego ir Apariencia y seleccionar Custom Fonts.

Una vez ahí, el proceso es tan sencillo como cargar la nueva Fuente Personalizada en nuestro WordPress seleccionado el formato respectivo y asignando un nombre a la misma. En la imagen puedes ver como yo he creado las fuentes «Colonna» y «University Roman».

Tipografía Personalizada en WordPress con CSS.

Si no eres muy partidario de los Plugins y prefieres mantener tu WordPress lo mas limpio posible utilizar un poco de CSS es la mejor solución.

Lo primero que debemos hacer es descargar la Fuente de Tipografía que usaremos en nuestro WordPress y generar el código CSS respectivo. Para ello te recomiendo que utilices Fontsquirrel.

Al ingresar debemos subir nuestra Tipografía y seleccionar la opción «Optimal». El proceso es automático y al finalizar nos mostrara el botón para descargar el Kit.

Al descargarse el archivo, este viene comprimido en .ZIP por lo que deberás descomprimirlo. Eso te generara una carpeta como la que te muestro en la imagen.

Deberemos subir el contenido de dicha carpeta al directorio de nuestro sitio web. Lo ideal es hacerlo en una carpeta llamada «Fuentes» u otro nombre que sea fácil de recordar.

Dentro de la carpeta deberemos modificar el archivo «stylesheet.css». El cual te mostrara un código como el siguiente:

@font-face {
    font-family: 'university-roman-normalRg';
    src: url('university-roman-normal-webfont.woff2') format('woff2'),
         url('university-roman-normal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Debemos remplazar las url por la dirección exacta de nuestro sitio web y ubicación donde hemos subido los archivos de la Tipografía Personalizada. De forma que el código quedaría de la siguiente forma:

@font-face {
    font-family: 'university-roman-normalRg';
    src: url('https://AQUI VA EL NOMBRE DE TU WEB.com/fuentes/university-roman-normal-webfont.woff2') format('woff2'),
         url('https://AQUI VA EL NOMBRE DE TU WEB.com/fuentes/university-roman-normal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Ahora ya tenemos el código listo para utilizar nuestra Tipografía Personalizada en WordPress. Pero ¿Donde colocamos el código?

Para esto existen varias alternativas y dependerá del Tema que estemos utilizando. Sin embargo, la solución mas sencilla es insertar el código dentro de la opción «Código CSS Personalizado» que incluye la mayoría de temas de WordPress.

Recuerda que el único inconveniente de esto es que al actualizar el Tema puede que se pierdan los cambios personalizados. Para evitar esto puedes utilizar un Child Theme.

Hugo Parrales

Doctor en Medicina. Emprendedor y Apasionado de la Informática. Con mas de 10 años de experiencia creando Sitios Web, programador y amante de las matemáticas.

hugoparrales.com

La entrada Fuentes Personalizadas en WordPress se publicó primero en Hugo Parrales.