CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

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

@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

<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

@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:

@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

@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á.

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

@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