Use @font-face properly
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... */Written by Félix Saparelli
Related protips
3 Responses
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.
Ah, dreaded compatibility. Let us first refer to lovely caniuse: font-face is supported on all browsers (going back to IE4!) except for Android 2.1 (of which I'd hope there would be no or little remnants) and Opera Mini (obviously). Furthermore, the table notes that IE8 and below only support EOT. So far, so good, as these are quite well known and thoroughly covered already.
This NiceWebType article from back in 2009 indicates that style linking (which is what I'm showing) will not work in IE (and the odd unfixed Opera 10). But what version of IE is that? Simple research would seem to indicate IE8. Further than that, the MSDN documentation is clear: both format hinting and style linking are supported starting from IE9 only.
So it all comes down to what browsers you support. Coderwall, being targeted at developers (read: people who generally should have up-to-date software), should probably be OK (after all, they use box-shadow and border-radius pretty liberally, none of which are supported in IE8). YMMV. Personally, I have been using style linking for all my font needs for as long as I can remember.
And, just a quick thought: if you “reverse” your font-face rules such that the regular one is last, IE8‒ should use that, and apply “fake” styling and weighting. Should be tested first, but in all logic... 😉
Thanks for the insight and I agree with your arguments.
As always we have to find an alternative way for our lovely < IE9 friends. But unfortunately I too often have to deal with the requirement to support such browsers. Moreover, Windows Phone 7... behaves pretty similar to old IEs in regards to font rendering.
