7

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;
}
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
Nag
  • 806
  • 1
  • 13
  • 28
  • Why are you keeping same font name? :/ – Mr_Green Nov 13 '15 at 07:14
  • See http://stackoverflow.com/questions/2436749/how-to-add-multiple-font-files-for-the-same-font - PS @Mr_Green That is legal as long as the `@font-face` contains -style and -weight directives. – wiesion Nov 13 '15 at 07:28
  • @wiesion, exactly. That is what I have been trying to say. – weirdpanda Nov 13 '15 at 07:29
  • @wiesion that is strange.. I will learn something new today if it is true. I am doing research. – Mr_Green Nov 13 '15 at 07:42
  • sometimes when we generate the CSS for newly installed fonts we get the same font-family names,but with different font-weight and font-style.In that case we can use same font-family with different font-weight or style,whichever required! – Nag Nov 13 '15 at 11:59

3 Answers3

11

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.

weirdpanda
  • 2,521
  • 1
  • 20
  • 31
  • by just using the same font-family name and with different font-weight property? yea..? like this.. {font-family:'Montserrat'; font-weight:normal;} for regular..and {font-family:'Montserrat'; font-weight:bold;} for bold? – Nag Nov 13 '15 at 07:15
  • @weirdpanda that is weird. are you sure? (_to me it seems you are trolling with OP_) – Mr_Green Nov 13 '15 at 07:17
  • 1
    @Mr_Green, indeed. That's the way you use a font with multiple weights. People prefer to use `FONTNAMEBold`, but that's bad for maintainability; the preferred (and documented) way is to use `font-weights`. – weirdpanda Nov 13 '15 at 07:19
  • 1
    So @weirdpanda, just a question.... How do I choose to call either font family in my CSS, since the syntax for both would be `font-family:'Montserrat';` – masmrdrr Nov 13 '15 at 08:28
  • 1
    That's very simple; use the `font-weight`. I have given the definition of the style. For the bold one, you use `font-weight: bold;` and for the normal `font-weight: 300;`. Simple! :) – weirdpanda Nov 13 '15 at 08:48
  • @masmrdrr, have a look at the analogy I have drawn to explain it. – weirdpanda Nov 13 '15 at 08:59
1

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;
}
Antony SUTHAKAR J
  • 912
  • 1
  • 7
  • 13
1

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.

Oxfos
  • 71
  • 1
  • 7