Custom Fonts En WordPress (@font_face embedding). Personaliza tus tipografías.

Una opción muy buena para personalizar tu blog o web en WordPress consiste en personalizar (custom fonts) el tipo de letra que utilizas. Muchos temas permiten hacerlo, pero siempre limitado un listado de fuentes.

Si lo que necesitas es poder utilizar tu tipo de letra corporativo o específicamente una fuente en particular, con los siguientes pasos podrás hacerlo fácilmente.

Paso 1. Obtener la fuente

Si ya la tienes perfecto, si no, puedes comprarla o descargarla según los derechos de autor que tenga.

Paso 2. Convertir la fuente

Una vez hayas tengas el archivo de tu fuente, tienes que convertirla a todos los formatos posibles. Para esto, puedes utilizar esta herramienta online muy útil https://www.fontsquirrel.com/tools/webfont-generator

custom-fonts-wordpress-001

Aquí, basta con añadir la fuente, seleccionar OPTIMAL, Yes agree y os aparece el botón de Download Your Kit.

Al pulsarlo, nos descarga un zip con unos cuantos ficheros.

De ellos, nos interesan: .eot .svg .ttf .woff. Estos cuatro son lo que subiremos a nuestro hosting. (ver explicación de WOFF al final del artículo).

Además tenemos un fichero .html donde podemos comprobar que se ha generado correctamente nuestra fuente, y un fichero .css que contendrá el código css (@font-face) a incluir en nuestra web.

Pero vayamos por pasos.

Paso 3. Subir archivos de las fuentes

Una vez tenemos el .zip descargado, lo descomprimimos y mediante FTP subimos los cuatro ficheros eot, svg, ttf y woff al directorio de fuentes de nuestro WordPress. ¿Cuál es ese directorio? Pues bien, normalmente será algo como: …wp-content/themes/yourtheme/fonts donde yourtheme será el nombre del tema que estás utilizando.

Te puede interesar:  Exportar Base De Datos Con phpMyAdmin

Una vez copiados, abrimos el css y editamos el path de las urls. Es decir, para que no haya problemas, debemos añadir la url completa (http incluido) de nuestra web hasta el directorio fonts. Por ejemplo: https://www.example.com/wp-content/themes/yourtheme/fonts.

Añadimos el css a nuestra web y vamos al último paso.

El último paso toca definir nuestro tipo de letra al nuevo. Aquí dependerá un poco del tema que estéis usando, pero os dejo un par de ejemplos:

¿Has personalizado alguna fuente en tus webs? Cuéntanoslo.

¿Qué es WOFF?

WOFF son unas siglas que significan Web Open Font Format. Es un contenedor de formatos de tipos de letras, relativamente nuevo (año 2009), que se ha convertido en un estándar en los últimos años.

Ha recibido el soporte de Firefox (Fundación Mozilla).

WOFF permite contener tipografías TrueType y OpenType de manera comprimida.

Su compresión es su mayor virtud y el respaldo que ya tiene de W3C.

Básicamente, si tu navegador permite WOFF, tu navegador sabrá que fuente descargar y aplicar para mostrarte una web.

Deja un comentario