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:
- Font Squirrel @font-face Generator (enlace externo, en inglés)
- TTF to EOT Font Converter (enlace externo, en inglés)