¿De qué manera esta familia de fuentes CSS muestra "Economica" correctamente?

Question

En esta página: http://www.anasiamusic.com/bio.html en el cuerpo del texto ("caja de DJ de Ana Sia es una clave de pizarra ...") la propiedad font-family para que <div> se especifica como:

font-family: 'Economica', sans-serif 

Me preguntaba cómo funciona esto - incluso en Internet Explorer, en modo de visualización IE7, aún se muestra como se esperaba. Había estado apegándome a fuentes seguras para la web como Georgia, Verdana y otras para la copia del cuerpo especialmente y tenía la impresión de que para lograr algo como esto y hacerlo compatible con varias plataformas, uno tenía que usar @font-face.

Obviamente estoy equivocado, ¿podría alguien explicar y quizás señalar algunos buenos recursos sobre la tipografía web que podrían dilucidar más?

Tenga en cuenta que no tengo Economica instalado en mi computadora (Windows 7).

Answer 1

Economica es suministrado por Google Web Fonts (link to font specimen).

Se carga a través de este <link> etiqueta, que se puede encontrar en la cabeza página:

<link href='http://fonts.googleapis.com/css?family=Economica:700' rel='stylesheet' type='text/css'> 

Y luego incorporados por los navegadores que soportan la regla @font-face CSS, de manera que puedan mostrarlo dentro de la página. Puede leer más sobre @font-face en el CSS3 spec.

Google Web Fonts hace uso de esa regla, junto con el formato apropiado, para indicar a los navegadores que inserten la fuente. Los navegadores luego descargan la fuente e intentan renderizarla si está en un formato que entiendan; de lo contrario, recurrirán a lo que venga después en la pila (en este caso, la familia genérica sans-serif). Eso es todo lo que hay, realmente. El formato de fuente que finalmente se descarga depende del navegador: los navegadores modernos solo necesitan descargar el formato WOFF, mientras que los navegadores más antiguos como IE7 reciben un formato diferente llamado EOT (soportado desde IE4!) Para incrustar la fuente como bien. Las versiones anteriores de otros navegadores pueden tomar otros formatos como TTF, OTF e incluso SVG. Puede leer más sobre los diversos formatos y sus usos en artículos sobre la sintaxis a prueba de balas @font-face, como this one.

Answer 2

Tuve un problema similar con una fuente diferente. Lo que hice fue utilizar este sitio here y seguí las instrucciones. Resulta que Font Jazz convierte todos los tipos de fuente en seguros para la Web. Es bastante simple de usar también; solo dos archivos js.

Espero que ayude!