Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: Utilización de tipografías incrustadas mediante @font-face

Datos de búsqueda

CSS: Utilización de tipografías incrustadas mediante @font-face

Lo primero de todo es advertir que ésta técnica no valida en CSS 2.1, aunque si lo hace en CSS 3.

La llamada desde la CSS a una tipografía ayuda a eludir la necesidad de utilizar imágenes con texto (o Flash) en aquellos casos en los que se quiere utilizar una tipografía que no es de sistema.

Hay que limitarse en el uso de tipografías distintas de las habituales, evitando utilizarlas más allá de títulos (para no empeorar la legibilidad) y no utilizar varias (para evitar que la descarga de las mismas lleve un tiempo excesivo).

En la CSS hay que hacer uso de la regla @font-face:

@font-face {
  font-family: 'nombre-de-tipografia-en-la-css';
  src: url('fuente.eot');
  src: local('☺'), url('fuente.woff') format('woff'), url('fuente.ttf') format('truetype'), url('fuente.svg#nombre-de-tipografia-en-la-css') format('svg');
  font-weight: normal;
  font-style: normal;
}

Propiedades utilizadas:

  • font-family: este es el nombre que se usará para la tipografía en las reglas de la CSS.
  • src: ruta del archivo de tipografía.

Un ejemplo de uso:

#idElemento {font-family:nombre-de-tipografia-en-la-css, arial, sans-serif;}

Se utilizan en total cuatro archivos de tipografía:

  • TTF
  • EOT: para Internet Explorer (¡Funciona en Internet Explorer 5.5!).
  • WOFF: estándar W3C para tipografías web en estado de borrador, soportado ya por Firefox (3.6+), Chrome (6+), Opera (11.10+), Internet Explorer (9+), y proximamente Safari. Este formato de tipografía no se puede usar más que para la web, por lo que facilitará la obtención de permisos de uso de las tipografías en la web.
  • SVG: para dispositivos iOS (iPhone, iPod Touch, iPad).

Previsiblemente en el futuro el único formato a utilizar será WOFF.

Conversión de formatos

Habitualmente las tipografías nos llegan en formato OTF (Open Type) o TTF (True Type), por lo que habrá que convertirlas a los formatos adecuados:

Saber más

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “CSS: Utilización de tipografías incrustadas mediante @font-face”

Pablo dice:

Fecha de comentario: 2011/01/07 15:42

El uso de @font-face es algo que muchos hemos esperado, pero cuanto tiempo tomará que podamos usarlo sabiendo que la gran mayoria de los navegadores cargaran bien. Nunca he sido muy fanatico de usar SIFR debido a que no es tan bueno para SEO. Otro factor son los derechos reservados de las tipografias, no se pueden usar asi nomás y hay que tener cuidado con eso

Información del sitio