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