Multiple fonts in one family
I was wondering if it is possible to add multiple styles of the same font to the @ font-face tag. I read several places where he said it was possible, but every time I tried it he 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;
}
... etc. etc. (I'm actually using numerical scales, not just bold or normal scales, but that doesn't work anyway.)
So was it possible or were the articles I read just incorrect? I think I will need to define each one with its own name, but this kind wins just to use only one family and then rely on different CSS tags to convey the styling.
Thanks in advance!
source to share
This is the correct syntax and works great as you can see from the following executable 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, these are two completely different fonts, but we told CSS that they are both in the "Coolio" family, with font-weight acting as a differentiator.
source to share