Custom Fonts En WordPress (@font_dace embedding)

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0
¡Vota!

Una opción muy buena para personalizar tu blog o web en WordPress consiste en personalizar 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 Lo primero es obtener la fuente. Si ya la tienes perfecto, si no, puedes comprarla o descargarla según los derechos de autor que tenga. Una buena página de referencia es http://fontscore.com/

PASO 2 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 http://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.

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

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: http://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.

¿Hablamos?

Rafa Labrador

Rafa Labrador es el autor del blog del mismo nombre rafalabrador.com. Rafa ayuda a negocios unipersonales a conseguir más visibilidad y ventas en Internet gracias al SEO y el posicionamiento orgánico.
¿Hablamos?

Latest posts by Rafa Labrador (see all)

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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