CSS3 :: Font-face

Hay en ocasiones que estamos desarrollando webs en XHTML y nos encontramos en el diseño con tipografías que no tendrá la mayoría de los usuarios por lo que no podrán tener una correcta visualización de la página. Por lo que hasta ahora nos quedaban dos soluciones:

  • Uso de imágenes de fondo en el elemento que contiene la tipografía.
  • Algún método alternativo como el SIFR

Ahora en CSS3 tenemos la etiqueta font-face que permite usar una tipografía ubicada en el servidor.
La sintaxis de uso es la siguiente:

@font-face {
  font-family:NOMBRE_TIPOGRAFIA;
  src: url(RUTA_TIPOGRAFIA);
}

A partir de ese momento ya se puede usar en el CSS.

La verdad que me parece un gran paso. Ahora a buscar soluciones para versiones de navegadores antiguas que no lo soporten :). Os dejo un ejemplo para que veais como queda (se debe de probar en navegadores que ya lo soporten como puede ser a partir de la versión 3.1 de Firefox o safari 3.1) Prueba de font-face