How are different styles and weights of web fonts rendered? - html

Question

This is a general question about why certain font weights and styles need to be specifically included, but not others.
I use Open Sans and Roboto Mono web fonts on my website, hosted on Google fonts, with the basic <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono" rel="stylesheet"> statement in the HTML head. As one would expect, I don't have to specify that I want bold font weight or italic style text in the <link>; all browsers can generally handle <foo style="font-weight: bold"> and <foo style="font-style: italic"> and render those stylistic changes, even though it's technically a separate font (of the same typeface) that I haven't included.
However, if I wanted <foo style="font-weight: lighter"> (or <foo style="font-weight: 200">) and <foo style="font-style: oblique">, it won't render: lighter just looks like normal, and oblique looks like italic.
I know how to make it work, obviously; I'm just wondering two things:
How does the browser "make" the bold and italic (and bold-italic) versions of a typeface without the font?
Why can't it "make" the lighter and oblique versions?
NB: Typeface refers to the set of typographical symbols and characters in a particular shape (eg: Open Sans or Roboto Mono), and font is the typeface in a specific style (eg: Open Sans 400 italic or Roboto Mono 200 Italic)

Answer 1

You can find user friendly explanations to your question on the font-weight MDN page, including:
Meaning of relative weights
Base element Bolder Lighter
-----------------------------------------
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700
Common font weight mapping.
A more technical set of documentation can be found in official specs.
The current Candidate Recommendation CSS Fonts Module is Fonts Module Level 3 which is unchanged from the counterpart definition in Fonts Module Level 1.
In CSS Font Module Level 4 (currently working draft) there are a few notable changes proposed:
font-weight numeric values will vary from 1 to 1000
there might be additional strings mapped to particular numeric values (i.e: thin => 100, medium => 500, etc).
Browsers currently display the closest available font weight to 400 for font-weight: normal and the closest available font weight to 700 for font-weight: bold.
To make sure a particular font-weight is used, you need to:
load the weight
specify the exact numeric weight for your element(s).
To load multiple font weights from font files, use multiple #font-face declarations:
#font-face {
font-family: 'MyWebFont';
src: url('myfont-normal.woff2') format('woff2'),
url('myfont-normal.woff') format('woff'),
url('myfont-normal.ttf') format('truetype');
}
#font-face {
font-family: 'MyWebFont';
src: url('myfont-bold.woff2') format('woff2'),
url('myfont-bold.woff') format('woff'),
url('myfont-bold.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: 'MyWebFont';
src: url('myfont-italic.woff2') format('woff2'),
url('myfont-italic.woff') format('woff'),
url('myfont-italic.ttf') format('truetype');
font-style: italic;
}
#font-face {
font-family: 'MyWebFont';
src: url('myfont-bold-italic.woff2') format('woff2'),
url('myfont-bold-italic.woff') format('woff'),
url('myfont-bold-italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
In the above example, the file names don't really matter. What matters is that they point to the file containing the correct font style and font weight glyphs.
For Google fonts, it's easier. When loading more than just the default weight, specify all weights and styles as comma separate values, after the font-family name followed by a colon:
<link href="https://fonts.googleapis.com/css?family=MyFamily:n,i,b,bi" rel="stylesheet">
Besides n (normal), bi (bolditalic), you can also load numeric values: 400, 400i.
To find out more on how to load multiple weights, styles and subsets of the same font family from Google, you should read their "Getting started" page.
Note the required font styles, weights and subsets need to be available in order to be usable. If you request something that does not exist, Google will return the closest match to your request from available weights/styles/subsets.
You can easily see a list of available weights, styles and subsets on each font page and the correct URL will be generated for you by checking the appropriate checkboxes.