Una de los principales aspectos que siempre me han traído de cabeza con el diseño de blog es la tipografía. Las habituales Helvética, Verdana, Georgia, Arial o Lucida, empleadas por la gran mayoría de diseños y themes hacen que el blog parezca demasiado uniforme y sin personalidad. Existen herramientas como Cufon (gratuita) o Typekit (de pago) que pueden resolver esa cuestión, pero son de implementación complicada o requieren demasiado tiempo. Hoy, gracias a Line 25 he descubierto otro método mucho más sencillo. Utilizando la especificación @font-face de CSS, que al parecer lleva tiempo ya implementada, podemos conseguir que nuestro blog tenga una tipografía original y con personalidad. Además ya los principales navegadores (Safari, Firefox, Opera y Chrome) la soportan. Así que manos a la obra. Con estos sencillos pasos pueden incorporar una tipografía diferente y realmente personal al blog:

1. Descargarnos el archivo de la fuente tipográfica que queremos usar. Debemos tener cuidado porque no todas las fuentes están licenciadas para poder ofrecerlas publicamente. En WebFonts tenemos una lista de fuentes disponibles para @font-face, con enlaces para su descarga y previsualización. Una vez hayamos descargado el archivo elegido lo subiremos a nuestro servidor, tomando nota de la ruta.

2. Editar el archivo style.css del theme activo de WordPress. Al principio de las declaraciones css debemos añadir la siguiente línea de código:

@font-face {
font-family: Blackout;
src: url("path-to-file/blackout.ttf") format("truetype");
}
(Esto en el caso de que se trate de una fuente TrueType)

@font-face {
font-family: Delicious;
src: url("path-to-file/Delicious.otf") format("OpenType");
}
(Y esto si es una fuente OpenType)

Donde ‘Blackout’ y ‘Delicious’ debemos sustituirlos por el nombre de la fuente que hayamos elegido, y ‘path-to-file’ por la ruta del archivo de la fuente que previamente habremos subido a nuestro servidor.

Este código significa que siempre que en el CSS se encuentre la especificación ‘font-family:Delicious’ debe usar ese archivo.

3. Asignar la especificación de fuente a los elementos CSS deseados. Por ejemplo:

h1 { font-family: Delicious, Helvetica, Arial, Sans-Serif; }

Recordando siempre añadir fuentes adicionales para los navegadores que no soportan @font-face.

Y listo, quedaría ajustar el tamaño de la fuente en el css.