font-face

En esta entrada explicaré los mejores métodos para introducir @font-face en nuestro documento.

Select Code
@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), local('Graublau Web'),
url(GraublauWeb.otf) format('opentype');
}


El código de arriba podría ser la mejor opción para aplicar @font-face, pero en IE no nos sirve y necesitamos tener una fuente .EOT, mientras que los otros navegadores necesitan una fuente .TTF u .OTF.

Comentarios condicionales

Select Code
<style type="text/css" media="screen">
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Graublau Web';
src: url('GraublauWeb.eot');
}
</style>
<![endif]-->
<style type="text/css" media="screen">

@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.otf') format('opentype');

}

</style>

<!--[if IE]>

<style type="text/css" media="screen">

@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.eot');

}

</style>

<![endif]-->


Podemos aplicar comentarios condicionales para que IE muestre otro tipo de fuente.

Declaraciones dobles

Select Code
@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.eot'); /* here you go, IE */

}

@font-face{

font-family:'Graublau Web';

src: url('GraublauWeb.otf'); /* everyone else take this */

}


El problema de esta solución es que IE descargará el formato .OTF. Podemos añadirle el tipo de formato a aplicar:

Select Code
@font-face {

font-family: 'Graublau Web';

src url('GraublauWeb.otf') format('opentype'); /* IE no comprende format()! */

}


Pero IE no reconoce la propiedad “format”. Esta solución es mucho mejor:

La referencia local

Select Code
@font-face {

font-family: 'Graublau Web';

src: url(GraublauWeb.eot);

src: local('Graublau Web Regular'), url(GraublauWeb.otf) format('opentype');

}


Mucho más limpia y ordenada. Aquí, si el navegador no es Internet Explorer, no lee el archivo .EO, y carga el sitio. IE intentará leer el segundo valor src, pero no puede entender “local()” ni las ubicaciones múltiples, por lo que en vez de eso recurreo a leer la fuente .EOT. IE siempre lee la última dirección (src), por lo que esto no funcionará.

Select Code
src: url(GraublauWeb.eot);

src: url(GraublauWeb.otf); /* IE sólo leerá esta dirección  */


Si por casualidad el usuario tiene la fuente instalada en su ordenador, podremos ahorrarnos la descarga. El problema es que Safari sólo utilizará el nombre PostScript, no el nombre de la fuente completa, así que cuando estas sean diferentes, incluiremos ambos nombres:

Bulletproof @font-face

Select Code
@font-face {

font-family: 'Graublau Web';

src: url(GraublauWeb.eot);

src: local('Graublau Web Regular'), local('Graublau Web'),

url(GraublauWeb.otf) format('opentype');

}


Vía | Paul

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!