Durante años, los desarrolladores hemos estado tipográficamente limitados a las pocas fuentes disponibles para todos los navegadores. Cierto es que con el tiempo han ido apareciendo multitud de recursos para poder hacer uso de cualquier tipo de fuente de texto como puede ser Cufon o sIFR pero todas ellas requieren de la utilización de javascript, php e incluso flash. Aunque aún es pronto principalmente debido a la cuota de uso de Internet Explorer, ya los demás navegadores aprovechan o están a punto de aprovechar las nuevas características implementadas en HTML5.

Estos días atrás estuve jugando un poco con @font-face, ello permite cargar cualquier tipo de fuente para ser utilizada en tu web. En concreto he cambiado la fuente de los títulos de los posts de este blog que utiliza un atributo ‘h2’ quedando de la siguiente manera:

titulos-en-html5
Su utilización es muy sencilla:

@font-face {
font-family: breipfont;
src: url(images/breipfont.otf) format("opentype");
}

Con esto cargamos la fuente (en mi caso breipfont) haciendo la declaración con la regla ‘font-face‘ y le asignamos un nombre.

.post-content h2 {
font-family: 'breipfont', 'Georgia';
font-size: 26px;
line-height: 30px;
padding-left: 18px;
}

Se la aplicamos a ‘h2‘ haciendo la llamada con ‘font-family‘. Si el navegador es compatible aplicará la fuente ‘briepfont‘ y en caso contrario utilizará ‘georgia‘. Sencillo verdad?

Aquí tienes un listado de fuentes disponibles para descarga.

Notas: Observo que Chrome y Opera no renderizan aún las fuentes, es extraño ya que anuncian su compatibilidad en sus últimas versiones. No he investigado demasiado el tema pero parece que en el caso de Chrome es debido a algún bug. Firefox 3.5 y Safari desde su versión 3.1 lo hacen a la perfección.