Uso de tipografías

Profesores:JAB y Ester Torres

Utilización de tipografías paso a paso

Con HTML5 es posible utilizar fuentes (tipografías) poco comunes sin que el usuario las tenga que tener instaladas en su disco duro y sin tener que convertirlas en imagen.

En este caso basta con incluir el fichero de la fuente a utilizar correspondiente en una carpeta y crear la referencia a dicha fuente desde el código CSS3.

Vamos a ver cómo hacerlo paso a paso..

1. Decidimos el formato de fuente a utilizar
Como para todo, existen varios formatos de fuentes y -como no- cada navegador tiene sus preferencias y sus enemistades.

Vamos a ver qué hay y como intentar contentar a todos.

TrueType (ttf)
Es el formato más estándar y aceptado por todos los navegadores, excepto por nuestro gran amigo Internet Explorer.
OpenType (otf)
Es otro formato muy extendido y con un nivel de compatabilidad muy similar a ttf por lo que se puede utilizar uno u otro.
Embedded OpenType (eot)
Es el formato de fuente que sólo utilizar Internet Explorer a partir de la versión 6. Ha sido declarada como no-estándar por la W3C.
WebOpen Font (woff)
Aunque es el formato de fuente oficial de la W3C, existen algunos navegadores y versiones antiguas que no la soportan.

¿Cúal elegimos?

Si queremos abarcar el máximo número de navegadores sin vivir añadiéndo formatos de fuentes indefinidamente podemos utilizar básicamente ttf (para todos los navegadores normales) y eot (dos veces y poniéndolo el primero para Internet Explorer).



2. Copiamos las fuentes que vayamos a utilizar (ficheros ttf/eot)
Copiamos cada una de las tipografías (los archivos con formato .ttf y .eot) y las pegamos en la misma carpeta donde tenemos el fichero .CSS o el .HTML (si el código CSS se encuentra dentro del HTML -práctica no muy recomendable-).

Para convertir una fuente ttf en eot puedes utilizar esta utilidad on-line de kirsle.

3. Referenciamos las fuentes con CSS3
Dentro del código CSS añadimos la referencia utilizando el selector '@font-face{'.

En el mundo perfecto de la abeja Maya, sin problemas y sin Internets Explorers el código sería:

@font-face{
   font-family: fuente_pizza;
   src: url(pizza.ttf) format('truetype');
}
Como el mundo perfecto no existe, tenemos que contemplar la existencia de Internet Explorer añadiendo dos líneas más de código y en el siguiente orden por cada fuente.

Como en este ejemplo vamos a añadir 2 tipografías distintas tenemos que referenciar las dos:

@font-face{
   font-family: fuente_flor;
   src: url('fleur.eot');
   src: url('fleur.eot?#iefix') format('embedded-opentype'), url('fleur.ttf') format('truetype');
}
	
@font-face{
   font-family: fuente_pigeon;
   src: url('pigeon.eot');
   src: url('pigeon.eot?#iefix') format('embedded-opentype'), url('pigeon.otf') format('opentype');
} 
El nombre que indicamos con el atributo 'font-family' (en el ejemplo superior: 'fuente_flor' y 'fuente_pigeon') es un nombre que le damos a la fuente, para luego poder hacer referencia a ella, por lo tanto dicho nombre nos lo podemos inventar.

Por el contrario, el nombre que viene indicado en 'src: url' (en el ejemplo: 'fleur.ttf' y 'pigeon.otf') es el nombre exacto del fichero ttf/otf/eot de la fuente que hemos copiado, indicando siempre el formato.

Cabe recordar que si las fuentes las hemos colocado en la misma carpeta donde se encuentra el fichero CSS no es necesario indicar el nombre o ruta de ninguna carpeta.



4. Aplicamos la tipografía
Cuando queramos que el texto contenido en un <div>, <span>, <p> o etiqueta semántica utilice una de las fuentes referenciadas con @font-face utilizamos la propiedad font-family para indicar qué tipografía de las referenciadas en el punto anterior queremos utilizar.
#apartado_1{
   font-family:fuente_pizza;
   font-size:38px;
   color:white;
}
En este caso todo el texto que contenga el <div>, <span>, <p> que tenga como id "apartado_1' utilizará la fuente llamada 'fuente_pizza', con un tamaño de 38 píxeles y de color blanco, tal y como se puede apreciar en la siguiente muestra:


Este texto utiliza la fuente pizza.ttf