Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use font-family with same name?

Tags:

css

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;
}
like image 897
Nag Avatar asked Mar 15 '23 04:03

Nag


1 Answers

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:

have a look

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.

like image 79
weirdpanda Avatar answered May 19 '23 16:05

weirdpanda