CODEWITHSUNDEEP
cssfontsfont-family
Funkenstein
Funkenstein

Reputation: 83

Multiple Fonts in Same Family

I was wondering if it was possible to add multiple styles of the same font to the @font-face tag. I read a few places where it said it was possible, but every time I've tried it's just used the default font. My current example with the fictional Coolio font includes:

@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio.otf)";
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-bold.otf)";
    font-weight: bold;
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-italic.otf)";
    font-style: italic;
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-bolditalic.otf)";
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Coolio;
    src: url("../fonts/coolio-condensed.otf)";
    font-stretch: condensed;
}

...and so on and so forth. (I'm actually using numerical weights rather than just bold or normal, but it doesn't work either way.)

So is it possible or were the articles I read just incorrect? I'm thinking I'd have to define each one with its own name, but that kind of defeats the point of just using one family and then relying on the various CSS tags to hand the styling.

Thanks in advance!

Upvotes: 4

Views: 6933

Answers (1)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53598

This is the correct syntax, and works fine, as can be seen in the following runnable snippet:

@font-face {
  font-family: Coolio;
  src: url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  font-weight: normal;
}

@font-face {
  font-family: Coolio;
  src: url(http://fonts.gstatic.com/s/greatvibes/v4/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
  font-weight: bold;
}

body {
  font-family: Coolio;
}

h1 {
  font-weight: bold;
}

p {
  font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Font family demonstrator</title>
</head>
<body>
    <h1>This is some text</h1>
    <p>And this is also text</p>
</body>
</html>

For illustrative purposes, those are two completely different fonts, but we told the CSS that they're both in the "Coolio" family, with font-weight acting as differentiator.

Upvotes: 3

Related Questions