Search code examples
htmlcssfontsfont-face

The right way to include multiple fonts in css

I don't a simple moment. Which way is the right way to include multiple fonts in css? Here are simple examples.

This?

@font-face {
font-family: DeliciousRomanRegular;
src: url(/Delicious-Roman-R.otf);
}

@font-face {
font-family: DeliciousRomanBold;
src: url(/Delicious-Roman-B.otf);
}

or this?

@font-face {
font-family: Roman;
src: url(/Delicious-Roman-R.otf);
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: Roman;
src: url(/Delicious-Roman-B.otf);
font-style: normal;
font-weight: bold;
}

And why? I use the second one, because I can add font-family to BODY and just add font-style or font-weight to other classes. And it works.

But I saw people using the first method many times. But it seems to me too rude. Every time you need to add bold to a class you have to use "font-family: DeliciousRomanRegular, Arial, sans-serif;". WTF?

Solution

  • The second option: you use the same font name, but for each variant you intend to use, you need to specify (a) the variation and (b) the alternate resource to use as font.

    This ensures that in your actual content CSS you can do things like:

    p {
  font-family: Roman;
  font-style: regular;
  font-weight: 400;
}

p em {
  font-style: italic;
}

p strong {
  font-weight: 800;
}

    And things will work correctly. Contrast this to the ridiculous notion of "changing the font family just because you wanted the same font, but italic". Let's not do that.