16 may 2010

Mejorar el aspecto tipográfico de tu blog

Gracias a un tweet de SpamLoco me enteré que se puede utilizar cualquier tipo de fuente (letra) en nuestro blog. La idea es poder dejar de lado un poco la uniformidad de utilizar las fuentes clásicas, como Arial, Helvética, Verdana, Georgia o Lucida y mostrar el blog con un texto diferente.

En La Brújula Verde postean cómo podemos conseguir que nuestro blog tenga una tipografía original. Aclaro que ésto funciona únicamente en los navegadores actualizados como Firefox, Safari, Opera y Chrome.

El "truco" lo realizamos con la especificación @font-face de CSS de la siguiente manera:

Primero debemos elegir la fuente que queremos mostrar y alojamos el archivo de la fuente en un servidor propio. Luego vamos a la Edición HTML y colocamos el código CSS antes de </b:skin> :

 @font-face {
font-family: Nombre-de-fuente;
src: url("url-de-archivo/blackout.ttf") format("truetype");
}


Después de eso, para utilizarla debemos establecer el tipo de fuente a utilizar en el lugar donde queremos que se vea, por ejemplo en algún título:

h1 { font-family: Quadranta-bold, Helvetica, Arial, sans-serif; }

Dónde: Nombre-de-fuente es el nombre de la fuente.
            url-de-archivo es la dirección del servidor donde alojamos el archivo de la fuente.
            Quadranta-bold es el nombre de la fuente utilizada en el título como ejemplo.

Vemos cómo queda con la Vista Previa y Guardamos los cambios. Ya lo único que quedaría sería cambiar el tamaño a la fuente, pero eso es a gusto personal. Yo estoy utilizando la Quadranta bold en los títulos de los Post.