Google font locally with different weights but with the same name - css

Question

Here's my problem:
In order to improve my SPEED mark on google speed insight, I had to switch from render-blocking google fonts to loaded locally google fonts.
So far so good except that I have a HUGE problem.
Before I was loading my fonts in this way:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300|Ubuntu+Condensed|Ubuntu:300,700" rel="stylesheet">
And in my huge style-sheet, I was just calling them normally for example:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
But now, since I had to download them to avoid the render-blocking red flag, I'm calling them in this way:
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-Bold.ttf");
font-weight: 600;
}
#font-face {
font-family: "Opens Sans";
src: url("/fonts/OpenSans-ExtraBold.ttf");
font-weight: 700;
}
#font-face {
font-family: "Opens Sans Condensed";
src: url("/fonts/OpenSansCondensed-Light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu Condensed";
src: url("/fonts/UbuntuCondensed-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Regular.ttf");
font-weight: 300;
}
#font-face {
font-family: "Ubuntu";
src: url("/fonts/Ubuntu-Bold.ttf");
font-weight: 700;
}
And here you can see my PROBLEM.
I call different fonts with the same name, but they have different weights. Obviously, I can call them with a different name, for example, "Ubuntu Bold" but then I would have to change my entire stylesheet, for example, I should now declare:
body {
font-family: 'Open Sans Normal', sans-serif;
// font-weight: 400; //
}
p {
font-family: 'Open Sans Bold', sans-serif;
// font-weight: 700; //
}
Essentially, no more font-weight, only different font-family names to state the weight.
Is there any solution to my problem?

Answer 1

Even though the font files are different, you don't need to set a different font-family for each variation of the font. You can just set one font-family, and specify the different variations in the different #font-face properties.
You should define each #font-face with the same font-family name, like so:
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Regular.ttf");
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Italic.ttf");
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Opens Sans';
src: url("/fonts/OpenSans-Bold.ttf");
font-style: normal;
font-weight: 600;
}
Note that each different font file has a separate #font-face with different properties that correspond to the specific font file, but they have the same font-family. You can then use the font in your css like so:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.bold {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.italic {
font-family: 'Open Sans', sans-serif;
font-style: italic;
}
The other properties in your css classes (font-weight, font-style, etc) will determine which #font-face is used.