font-face-css

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:

font-face-Internet-Explorer-7

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.




Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!