1

When including a @font-face and src to import a webfont, I notice you can pass in 2 optional values. I am not doing that presently.

I have 2 Web-fonts, Lato Regular and Lato Bold.

Should I be specifying weight in the @font-face rule?

It says by default it uses regular.

I am not passing anything and it seems to render correctly i.e the bold version seems to be bold.

Would love to know the recommended way of doing this and what advantages or disadvantages it has?

Passing in bold as a weight would force the browser to bold the font? But its already bold - right?

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
Martin
  • 23,844
  • 55
  • 201
  • 327
  • 1
    Please post your CSS code. – Lowkase Jul 19 '16 at 14:35
  • Isn't this a bit primarily opinion-based? Or am I mistaken? – Jacques Marais Jul 19 '16 at 14:39
  • Not OP, but think it should *not* be opinion-based. The original author of a font face is the person designating slant and boldness of each variant they design, and random people on Internet (including embedding users) should not make uninformed decisions whether the font face they are importing "looks" "regular" or "bold", or what kind of slant it resembles. Also, the information about the kind of detail is embedded in the font face, so technically the user agent could infer it better than by *user* specification. Regardless, the explicit specification should follow author intent. – Armen Michaeli Jul 19 '16 at 14:45

1 Answers1

1

Yes, you should. The font-weight and font-style specify what you consider the font face to be. This means that you can embed a what is designed by an author to be a regular font face, as a bold font face. This also means that when you use such font face, you'd better use font-weight: bold, unless there are no alternatives in which case the user agent will select the font face anyway.

In your case:

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: /* The URL of the resource containing the non-slanted regular font face. */
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: bold; /* or 700 */
    src: /* The URL of the resource containing the non-slanted font face with 'bold'/700 glyphs. */
}

If you don't specify font-weight in your @font-face rule, your font face is assumed by user agent to have glyphs with the default weight of 400 ("regular"). Consequently, not specifying font-weight in rules that reference your font face, still defaults to same font weight, and everything is fine, there is no conflict.

I also frequently use numeric font weights, because all too often custom fonts are divided into semi-bold and extra-bold gradations, so having something like font-weight: 600 lets you select an embedded semi-bold font face (which also has font-weight: 600 in its corresponding @font-face rule).

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95