Inserta cualquier tipografía en tu sitio web usando @font-face

Leo en CSSBlog un interesante artículo sobre cómo usar el elemento @font-face para incrustar y usar cualquier tipografía en tu sitio web.

@font-face es una propiedad muy útil para definir en un sitio web una o más fuentes que el usuario no tenga instalada en su PC. Sólo es necesario subir la fuente a nuestro sitio web y definirla via CSS.

Para el tipo de fuente, puede usarse una en formato OpenType (.otf) o bien en formato Truetype (.ttf). Vemos un ejemplo si quisiéramos usar la tipografía gratuita Myndraine en los titulares H1:

@font-face {
font-family: "Myndraine";
src: url(http://www.fontex.org/download/Myndraine.otf) format("truetype");
}

h1 {
font-family: "Myndraine", Verdana, sans-serif;
}

Y eso es todo. @font-face está soportada por Internet Explorer 7+, Firefox 3.5+ y Safari 3+ .

Via: CSSBlog