Here is the css: one is Regular and other one is Bold but both has same font-family name.
How to differentiate and use it in our stylesheet?
@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Bold.eot');
src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Montserrat-Bold.woff') format('woff'),
url('fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.eot');
src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Montserrat-Regular.woff') format('woff'),
url('fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Use different weights.
Give the first one a weight of 200
and the second one a weight of 300
. Then, you can use the two:
font-family: 'Montserrat', sans-serif;
font-weight: 200 /* for the first one */
/* or font-weight: 300; for the second one */
EDIT: After the OP specified the weights
You can give the following attributes to the second (bold) one:
font-weight: bold;
font-weight: 700; /* fallback */
and the following to the first (regular) one:
font-weight: 300;
Now, to use the bold one:
font-family: 'Montserrat', sans-serif;
font-weight: bold; /* or 700 */
and to use the normal one, switch the font-weight
:
font-weight: 300;
There you go! :)
Mr_Green, fresh out of Google's Font CSS:
A basic analogy to describe how the
font-weight
rule works
When you describe a font with a name, imagine (in the most abstract of the explanations) that you create an object; but, when you create multiple font-rules with the same name, imagine you create an array. Now, to access and array, you have to use its index
. The index
here is the font-weight
. So, to access different weights (technically, fonts), you use the weight. Continuing the analogy of the array above, you have to manually
define the index, it's not automatically done.
I think this makes it a little more clear.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With