I never did this mistake myself, and it's actually the first I see of it. Where did I see it? Why, here, of course!
/* Heavily snipped */
@font-face {
font-family: "MuseoSans-300";
src: /* Multiple url() and format() follow */;
}
@font-face {
font-family: "MuseoSans-500";
src: /* Multiple url() and format() follow */;
}
@font-face {
font-family: "MuseoSans-300Italic";
src: /* Multiple url() and format() follow */;
}
@font-face {
font-family: "MuseoSans-500Italic";
src: /* Multiple url() and format() follow */;
}
@font-face {
font-family: "MuseoSans-900";
src: /* Multiple url() and format() follow */;
}
What?! No... please tell me you didn't do that. You did? Oh well...
@coderwall – and anyone who doesn't see the problem – you can (and should) use font-weight and font-style properties to let the browser manage the font.
So the above would become this:
@font-face {
font-family: "Museo Sans";
src: /* Multiple url() and format() follow */;
font-weight: 300;
}
@font-face {
font-family: "Museo Sans";
src: /* Multiple url() and format() follow */;
font-weight: 500;
}
@font-face {
font-family: "Museo Sans";
src: /* Multiple url() and format() follow */;
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "Museo Sans";
src: /* Multiple url() and format() follow */;
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "Museo Sans";
src: /* Multiple url() and format() follow */;
font-weight: 900;
}
Much better. And now your CSS can become something like this:
body {
font-family: "Museo Sans";
}
/* Let the browser use the proper font
when it sees <i> and <em> and <b> and
<strong> and font-style: italic... */
Hi Felix,
are you sure that our lovely beast IE and some of the Android brigade will properly handle the font-faces? I personally have not investigated the dark sides of font-weights in those systems.