Existen una lista de tipografías estándares que todos los navegadores pueden interpretar, pero, ¿qué ocurre con las demás tipografías? ¿Cómo podemos implementarlas?
@font-face es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web (mediante un cliente FTP, al servidor) y definirla mediante CSS.
La fuente debe ser definida por la regla @font-face, además de la clase en la que la vayamos a usar.
Para el tipo de fuente, puede usarse en formato OpenType (.otf) o bien, en formato Truetype (.ttf).
Cómo implementar @font-face
Vamos a aplicarle la tipografía “Kimberley” en un encabezado H1, como ejemplo de Alistapart. Así funciona:
@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/ » kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif } @font-face { font-family: "Kimberley"; src: url(http://www.midominio.com/fuente/kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif }
Obviamente, debemos ubicar la dirección donde se encuentra la tipografía que deseemos definir en nuestro sitio, en este caso, “Kimberley”.
Si tenemos una larga lista de fuentes propias, podemos usar @import:
@import url(http://www.midominio.com/style/index.css) all; h1 { font-family: Goodfish, serif }
Y ya está. @font-face está soportada por Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+.
Una imagen de Internet Explorer 7+ aplicando @font-face:
Problemas con Internet Explorer 6+
Si deseemos aplicar @font-face en Internet Explorer 6+, sin usar formato “.otf”, debemos aplicar comentarios condicionales, además del que tengamos para los navegadores modernos (compatibles con @font-face, los listados en el anterior párrafo). El código a definir para Internet Explorer 6+ es este:
<!--[if IE]> <style type="text/css" media="screen"> @font-face{ font-family:'Fontin-Regular'; src: url('Fontin-Regular.eot'); } </style> < ![endif]-->
Para convertir fuentes .ttf a .eot, por ejemplo, podemos usar WEFT 3.
Y así Internet Explorer 6+ podrá interpretar @font-face. Cualquier duda o sugerencia podéis escribirla desde los comentarios.