# Web Font

## Summary


Web designers often wish to be creative with typography, which really means that they wish to use non-standard and even custom-designed fonts to convey their message in a particular way. Web font enables them to achieve this by allowing web pages to link to and download fonts on the web. Previously designers were limited by a few fonts installed on a user's computer. This is no longer the case with web fonts. 

The format of font files (WOFF, WOFF2, and more) and how browsers behave while fonts are being download are some aspects that are standardized by W3C. In CSS3, these details are specified in the *CSS Fonts Module Level 4* document. 

Since their introduction in 2009, web fonts have gained tremendous popularity. Hundreds, if not thousands, of fonts are available at the disposal of web designers.

## Discussion

### What's the need for web fonts?

Historically, web pages could be rendered only in **system fonts**, that is, fonts installed on the user's computer. This meant that even if a web designer chose to use a certain font there was no guarantee that the user would view the content in that font. 

CSS `font-family` property accounted for this by providing fallback fonts. Consider the CSS rule `font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;`. The browser looks for Helvetica font. If not found, it looks for Trebuchet MS, and so on. Thus, text would be rendered but not necessarily in the designer's preferred font of Helvetica. 

The web community attempted to address by creating a list of **web-safe fonts**. These are fonts that are likely to be available on most computers. Designers who used only these fonts could achieve consistent styling regardless of the device. Arial or Helvetica, Times New Roman or Times, Courier New or Courier are web safe. More web safe fonts include Verdana, Georgia, Palatino, Garamond, Bookman, and Avant Garde. 

However, the list of web-safe fonts is still small. This is where web fonts become relevant.


### Which are some web services offering downloadable web fonts?

Many web font services are available, offering a mix of free and paid fonts: Google Fonts, The League of Movable Type, Font Fabric, Lost Type Co-op, Font Squirrel, Font Spring, MyFonts, dafont, Typekit, Fontdeck, Webtype, Open Font Library, FontSpace, Befonts, Fonts for Web, Adobe Fonts, Fonts.com, and Brick. 

Since its launch in 2010, Google Fonts has been popular. Google offers a directory for browsing and downloading fonts. There's also an API that developers can call from CSS stylesheets. This enables browsers to download the specified font when required by a web page. 

Typekit was launched in 2009, acquired by Adobe in 2011, and now part of Adobe Fonts. Typotheque, also started in 2009, is an alternative. For commercial fonts, Typotheque issues a license key that's linked with the domains that are meant to use them. This license key is part of the URL when downloading the font. 

Icons can also be delivered as web fonts. Font Awesome is a well-known source for icon fonts. 


### Which are some popular web fonts?

While many sites and blogs recommend dozens of web fonts, this list is based on actual downloads as on August 15, 2020.

An analytics dashboard on Google Fonts shows that top ten downloads (7 days) are for Roboto, Open Sans, Lato, Oswald, Montserrat, Roboto Condensed, Slabo 27px, Source Sans Pro, Raleway, and PT Sans. 

On Font Squirrel, the most downloaded fonts are Open Sans, Montserrat, Roboto, Raleway, Great Vibes, Bebas Neue, Alex Brush, Quicksand, Lato and Pacifico. 

Fonts.com lists the following all time bestselling web fonts: Neue Helvetica, Proxima Nova, Avenir, Avenir Next, Futura PT, Futura, Helvetica, Univers, Museo Sans and Sofia Pro. 

Bestselling fonts (30 days) at MyFonts.com are Neue Helvetica, Gilroy, Proxima Nova, Avenir Next, FF DIN, Helvetica, Avenir, Helvetica Now, Milliard, and ITC Avant Garde Gothic. 


### How can I include a web font for my web page?

Here's an example of using Google Fonts but the approach is similar for other web font services. You can even download the font file and serve it from your own server. 

One method is to link to a CSS file from HTML using the `<link>` tag. This CSS file would contain details of the font including the URL of the actual font files, typically in WOFF or WOFF2 file formats. For example, HTML page points to CSS file `https://fonts.googleapis.com/css?family=Tangerine`, which contains the URL `https://fonts.gstatic.com/s/tangerine/v11/IurY6Y5j_oScZZow4VOxCZZM.woff2`. 

An alternative is to download the web font from within another CSS file or within a `<style>` tag using `@import https://fonts.googleapis.com/css?family=Tangerine;`. 

Text can be styled in CSS to use the web font, such as, `body { font-family: 'Tangerine', serif; }`. This can in HTML within a `<style>` tag or part of a separate CSS file. 


### How do I use the CSS property "font-display" for web fonts?

Within the `@font-face` CSS rule, `font-display` property is applicable. It takes these values: 

    + `auto`: Default. Allows browser to apply its own default. Often similar to `block`.
    + `block`: Text is hidden until the font is loaded. This results in Flash of Invisible Text (FOIT).
    + `swap`: Tells browser to use a fallback until font is loaded. This results in Flash of Unstyled Text (FOUT).
    + `fallback`: A compromise between `auto` and `swap`. Browser will hide text for a while and use fallback if the download is taking longer. If download takes too long, browser will stay with fallback.
    + `optional`: Like `fallback` but browser may ignore the font on slow connections.Among web designers, neither FOIT nor FOUT is satisfactory. FOIT is closer to the original design but users have to wait longer to read the content. With FOUT, users can read the content earlier but with a different user experience. In any case, with `font-display` designers get to choose. 

A related behaviour is Flash of Faux Text (FOFT) in which `font-synthesis` is used to render bold/italic variations while the true bold/italics are loaded. 


### For better performance, what's the best strategy for downloading web fonts?

It's possible to remove web fonts from the critical path. This could be done by lazy loading them until after the complete document is loaded. However, this only delays the FOIT that happens anyway when download is in progress. Hence lazy loading is not recommended. 

Instead, it may be better to load web fonts in advance via preloading, as in `<link rel="preload" href="https://fonts.gstatic.com/s/tangerine/v11/IurY6Y5j_oScZZow4VOxCZZM.woff2" as="font" type="font/woff2" crossorigin="anonymous">`. By the time the font is seen in CSS, it's already loaded. 

However, preloading should be done with care. Don't preload all web fonts since browser might prioritize font downloads over other downloads. If font resources are coming from external CDN, you might end up downloading old font files when newer ones are used in CSS. Always set `crossorigin="anonymous"` to the `<link>` tag. 

If the user's system already has the font, there's no need to download it from the web. This can be specified in `@font-face` by putting `local('fontname')` before the font URL for the `src` property. It's also best to put `@font-face` rules before any `<script>` tags. 


### Are there any best practices when working with web fonts?

Set HTTP headers correctly so that the font is cached at the browser. Avoid using localStorage or IndexDB since have their own performance issues. 

Since web fonts take up bandwidth, a good design should probably stick to just two fonts, one for heading and one for the body. Even within each font, **subset** the characters and load only those characters needed for the design. Some sites such as IcoMoon allow designers to create custom font files by picking only what you need from other fonts.

## Milestones

1996

Microsoft starts *Core Fonts for the Web* project. This creates a pack of TrueType fonts consisting of Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings. In subsequent years, these fonts are distributed by default on Windows and Macintosh. Web designers can now use these fonts and have some assurance that they would be available on user systems. However, later operating systems (Android, Ubuntu, iOS) and even some versions of Mac OS don't include all the fonts. 

1998

CSS2 is released. It includes `@font-face` that enables developers to link to a font file on the web that browsers can download. Thus, web designers are no longer limited to a few fonts installed on computers or supported by browsers. But there's no consensus on the font format. Netscape uses a close-source format called TrueDoc. Microsoft uses Embedded OpenType (EOT) that also supports encryption. Ultimately, licensing issues come in the way of widespread adoption of web-based fonts.  

2005

Based on JavaScript and Adobe Flash, **sIFR (Scalable Inman Flash Replacement)** is released. Designers could now replace text elements with Flash-based dynamic fonts. For example, headings and menus could be styled differently. Unlike replacing text with an image (some users might disable images), the text remains visible. If Flash is not installed on the browser, the browser falls back to a system font. 

2008

Beta version of Safari 4 supports TrueType fonts with `@font-face`. Beta version of Firefox 3.1 supports both TrueType and OpenType. While this enables better typography on the web, there's continuing concern about font piracy. 

May  
2009

Small Batch, a company in San Francisco, announces the **Typekit** project. It proposes a font delivery mechanism in which the font is delivered in subsets across multiple files that can only be reassembled by Typekit's JavaScript code. This brings protection against font piracy. In November, Typekit is launched as a subscription-based service for designers and developers. Meanwhile, in October 2009, **Typotheque** launches a similar service and releases an API in November. 

Jul  
2010

W3C releases the first draft of the **WOFF file format**, which is a more optimized way to deliver fonts to browsers. It basically compresses other font formats. Traditional font formats such as TrueType, OpenType and Open Font Format can be compressed to WOFF. It's not an installable font format. Rather, it can be used with `@font-face` CSS declaration. The WOFF format itself was developed in 2009. This draft becomes a W3C Recommendation in December 2012. 

Nov  
2010

Google reports that it's **Google Font API** currently serves 17 million requests per day, and growing at 30% every month. Likewise, Typekit is seeing 400 million font views per month. Typekit notes equal interest for commercial as well as free and open source fonts. However, there's more work to be done for browser/device support for complex scripts such as Arabic.  

2011

By this year, almost every major browser starts supporting WOFF, bringing true **cross-browser compatibility**. This is good news for font creators and web designers, who start using web fonts in their web designs. 

May  
2014

W3C releases the first working draft of **WOFF 2.0**. It offers 10-40% better compression than WOFF 1.0. It becomes a W3C Recommendation in March 2018. 

Feb  
2015

To address the problem of Flash of Invisible Text (FOIT), Jehl explores a method of embedding fonts directly within `@font-face` as **data URIs**. This indeed mitigates the problem but FOIT persists during a short interval when a slow device is processing the data URI. With the new **font events API**, Jehl shows how FOIT can be completely eliminated. 

Jul  
2017

W3C releases the first public working draft of *CSS Fonts Module Level 4*. This mentions `font-display` property of `@font-face`. This aims to give back control to web designers and developers. Previously browsers would determine how best to render text when fonts are downloading. 

Jul  
2020

W3C celebrates the 10th anniversary of the publication of the first draft of WOFF. WOFF, and web fonts in general, have transformed the way brands communicate with their customers. They've literally changed the *face* of the web. However, it's also noted that in some countries such as China they haven't been that popular. 

Aug  
2020

Reports at HTTP Archive show that on desktops the median download size of all font requests for a web page is about 128KB. Median number of font requests is 5. Similar numbers for mobile are 108KB and 4 requests. These numbers are for file extensions eot, ttf, woff, woff2, or otf, or MIME type containing `font`. On mobiles, 24.2% of pages avoid FOIT by using `font-display` property.