Elegir libremente la letra de tu web

Frase del dia: La libertad no tiene su valor en sí misma: hay que apreciarla por las cosas que con ella se consiguen. (Ramiro de Maeztu)

Este post esta redactado con la ayuda de una colaboración de un colega que nos cuenta su experiencia maquetando alguna web que otra. Gracias Iván ;)

En este post me voy a centrar en una directiva de CSS que nos va permitir el empleo de fuentes distintas a las preinstaladas o definidas en nuestros navegadores sin necesidad de emplear para ello imágenes simulando esas letras de la fuente escogida, lo que, además de impedir cambiar libremente y rapidamente nuestros textos, mataría nuestro posicionamiento entre otras cosas.

La directiva en cuestión es @font-face, podeis encotrar mucha mas información para ampliar conocimientos en sitios como CSSBlog. Me centraré en poner un breve ejemplo de uso de esta directiva.

Antes de nada decir que necesitamos tener la fuente en estos formatos .otf o .ttf para todos los navegadores salvo para el de siempre, el fantástico IE, que necesita el formato un poco mas complicadillo de conseguir .eot para que funcione, siempre dando problemas. Os pongo un enlace de apoyo para conseguir fuentes en .ttf y realizar conversiones de .ttf a .eot y otro más donde nos podemos descargar el formato en ttf.

Por último solo queda un poco de código para ver que funcione que es lo que buscais todos.

@font-face {
font-family: 'Trajan Pro';
src: url("fuente/TrajanPro.eot");
src: local('Trajan Pro'), local('Trajan Pro'),
url("fuente/TrajanPro.otf") format('opentype');
}