Uso de tipografías

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..

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).

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

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 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');
} 

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.

• Si es eot el valor del atributo 'format' debe ser ('embedded-opentype').
• Si es ttf el valor del atributo 'format' debe ser ('truetype').
• Si es otf el valor del atributo 'format' debe ser ('opentype').
• Si es woff el valor del atributo 'format' debe ser ('woff').

#apartado_1{
   font-family:fuente_pizza;
   font-size:38px;
   color:white;
}