Last Updated: February 25, 2016

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... */

#css

#font-face

Written by Félix Saparelli

Say Thanks

Respond

Related protips

Absurdly Abstract @font-face mixin

2.152K

Text-replacement with @font-face and base64

2.151K

using @font-face for @media print?

1.953K

3 Responses

Add your response

opinel

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.

over 1 year ago ·

passcod

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... 😉

over 1 year ago ·

opinel

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.

over 1 year ago ·