How to use font-family with same name? - css

Question

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;
}

Answer 1

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.

Answer 2

Simply you can use different font-family names for both Bold and Regular fonts, then refer in CSS as usual like below.
#font-face {
font-family: 'MontserratBold';
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;
}

Answer 3

The font-family value does not have to be unique: According to the w3 consortium, 'a font family defines a set of faces that vary in weight, width or slope. CSS uses the combination of a family name [i.e. font-family] with other font properties [src, font-style, font-weight and font-stretch] to select an individual face'. That is, two different #font-face rules may have the same font-family value (e.g. 'Montserrat') but be distinguished by e.g. different font-weight values (e.g. bold and normal, resp.). In this way different fonts can be selected.
The CSS style specified by #nag looks ok to me.
How to distinguish them? With selector-specific CSS. Mostly set by the developers.
However, since usually user agents define default CSS styles for standard html elements, most of the time you don't need to (set CSS for these). E.g. assuming you have somewhere defined the font-family as being Montserrat (e.g. in the body), and default CSS styles are not overridden, the content of the strong element, as in
<strong>I'm bold</strong>
is 'automatically' rendered bold because its default CSS style is usually:
strong {
font-weight: bold; /* this is the same as 700 b.t.w.*/
}
So, the font in the #font-face rule with font-weight: bold will automatically be selected.
Also good to know: Again according to the w3 consortium, if a requested font style is not found, the user agent can synthesize the requested style from the nearest similar one. But this is 'only' the case for italics and bold as far as I know.