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.

2 comentarios:

Lorenzo Núñez dijo...

Una duda, el código:
h1 { font-family: Quadranta-bold, Helvetica, Arial, sans-serif; }
¿Dónde va?
¿Abajo de:?
@font-face {
font-family: Nombre-de-fuente;
src: url("url-de-archivo/blackout.ttf") format("truetype");
}

egoloco dijo...

@Lorenzo Núñez

Te cuento algo Lorenzo? me dejó de funcionar ese truquito, puesto que me vi obligado a utilizar las fuentes proporcionadas por google para que los titulos tengan una tipografia mas decorativa, y por si te interesa voy a crear una entrada sobre eso, sino, te llevo con un maestro que si sabe :P

Ahora, si aun te interesa, el código que me consultas:

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

fijate que ya lo tenes definido en tu plantilla, utilizando este truco lo unico que hay que hacer es colocar el nombre de la fuente nueva en él, en este caso "Quadranta-bold" (sin comillas, obviamente). Gracias por comentar y prometo revivir este blog!

Publicar un comentario