Font FAQ

Table of Contents


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
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

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