Font FAQ
Table of Contents
History
Digital Fonts
Since the 1990s, digital fonts have been available for computers, allowing for much more beautiful and varied rendering than with the original pixel fonts.
After the original bitmap fonts, vector-based outline fonts evolved, allowing for even finer rendering. Adobe introduced the Type 1 and Type 3 formats, Apple Inc. developed the TrueType format (TTF), and a collaboration between Adobe and Microsoft resulted in the OpenType format.
Core Fonts for the Web
With the spread of the World Wide Web, Microsoft started a project in 1996 to define a list of standard fonts that
should be available on any computer system (Windows, Mac, Linux, ...).
Initially, these were the fonts Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times
New Roman, Trebuchet MS, Verdana and Webdings.
In order for the fonts to be displayed in the browser, they had to be installed on the respective computer.
Font Formats for the Web
Starting around the 2010s, the various browsers allowed the embedding of other fonts that could be loaded from
external sources. Over time, browser manufacturers supported various formats such as OTF, EOT, SVG, WOFF and WOFF2,
which were further optimized for use on the web.
Unfortunately, each browser manufacturer initially went its own way. To support all browsers, a font had to be
provided in multiple formats.
Modern Font Formats for the Web
Since around 2018, all major browsers (Chrome, Edge, Firefox, Opera, Safari, ...) support the WOFF2 format on both
desktop and mobile devices. See https://caniuse.com/woff2
Internet Explorer and my beloved iPad mini 1st Gen, both no longer officially supported, only know WOFF, but
not WOFF2. That's why I left WOFF in for the moment.
Web Font Loader provides all fonts in WOFF and WOFF2 formats to support the widest range of browsers while reducing the amount of font formats and file sizes to a minimum.
Character Sets
Each language has its specific set of characters, let it be latin, cyrillic or one of those various asian character
sets.
To reduce the file size of web fonts they usually are split into several smaller files each providing the character
set for a specific language.
That allows to download smaller files with only the characters you usually use in your language on your website.
For a Western European website like English or German you would provide the font in latin character set.
An Eastern European website like Czech or Croatian would require the latin-ext character set.
And if your website is Greek or Macedonian you would load greek and cyrillic character sets.
Unicode Ranges
Since 2018, all major browsers support Unicode Ranges. This feature allows even smaller font files since the files only contain a specific character range and the browser can choose which font files have to be loaded depending on the characters used on the page. See https://caniuse.com/font-unicode-range
Web Font Loader supports Unicode Ranges.
Referencing Fonts in CSS
To be able to use your specific font on your website you have to reference it in CSS.
This is done by the @font-face rule set.
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(full/Roboto-400.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(latin/Roboto-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
This references the font files for Roboto with a normal font style and a weight of 400.
There are two references, one for WOFF and one for WOFF2.
The browser will decide itself which is the optimal format to be used. For modern browsers that will always be
WOFF2.
Referencing the older WOFF format is for supporting Internet Explorer and my ancient iPad mini 1st Gen – even if
they're officially outdated.
The WOFF file is 66 KB, while the WOFF2 file is only 11 KB.
To be fair, the WOFF file contains the character sets latin, latix-ext, cyrillic, greek and greek-ext, while the
WOFF2 file only contains latin.
But hey, if we have a Western European website, why load the cyrillic characters? That's one advantage of Unicode
Ranges.
By the property font-display: swap; the browser is advised to use an alternative font until the Roboto
font has been loaded.
Alternative fonts would be the fonts defined in font-family properties for elements. See below.
See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for more
font-display options.
Assigning Fonts with CSS
To assign fonts to specific elements on your web page you will have to write CSS like this:
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', 'Arial Black', sans-serif;
}
That would assign the font family "Roboto" to all headings.
The font-family property names three fonts which the browser can use, prioritized from left to
right.
If the font "Roboto" is not available, the browser will try "Arial Black" or finally any sans-serif font he has to
offer.