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?
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).