Web Font
- Summary
-
Discussion
- What's the need for web fonts?
- Which are some web services offering downloadable web fonts?
- Which are some popular web fonts?
- How can I include a web font for my web page?
- How do I use the CSS property "font-display" for web fonts?
- For better performance, what's the best strategy for downloading web fonts?
- Are there any best practices when working with web fonts?
- Milestones
- Sample Code
- References
- Further Reading
- Article Stats
- Cite As
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 rulefont-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 filehttps://fonts.googleapis.com/css?family=Tangerine
, which contains the URLhttps://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 toblock
.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 betweenauto
andswap
. 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
: Likefallback
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 puttinglocal('fontname')
before the font URL for thesrc
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
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.
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.
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.
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.
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.
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.
2014
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.
2017
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.
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.
Sample Code
References
- Agarwal, Amit. 2012. "Quick Reference Posters for Google Web Fonts." Digital Inspiration, August 28. Accessed 2020-08-15.
- AlternativeTo. 2020. "Alternatives to Google Fonts." AlternativeTo. Accessed 2020-08-15.
- Biľak, Peter. 2019. "Brief History of Webfonts." Typotheque, October 22. Accessed 2020-08-14.
- Brown, Mandy. 2010. "Web fonts grow up: A look at the numbers." Blog, Typekit, November 3. Accessed 2020-08-14.
- Daggett, John, and Myles C. Maxfield, (eds). 2017. "CSS Fonts Module Level 4." First Public Working Draft, W3C, July 11. Accessed 2020-08-15.
- Font Squirrel. 2020. "Most Popular Fonts." Font Squirrel. Accessed 2020-08-15.
- Fonts.com. 2020. "Best Selling Web Fonts." Fonts.com. Accessed 2020-08-15.
- Google Developers. 2019. "Get Started with the Google Fonts API." Guides, Google Fonts, Google Developers, September 25. Accessed 2020-08-15.
- Google Fonts. 2020. "Analytics." Google Fonts. Accessed 2020-08-15.
- Graham, Geoff. 2020. "font-display." CSS-Tricks, March 25. Accessed 2020-08-15.
- HTTP Archive. 2020a. "Page Weight." Report, HTTP Archive, July 1. Accessed 2020-08-15.
- HTTP Archive. 2020b. "State of the Web." Report, HTTP Archive, July 1. Accessed 2020-08-15.
- Hoffmann, Jay. 2017. "The Decade-Long Path to Web Fonts." The History of the Web, September 19. Accessed 2020-08-14.
- Jehl, Scott. 2015. "How We Load Web Fonts Progressively." Blog, Filament Group, February 16. Accessed 2020-08-15.
- Kew, Jonathan, Tal Leming, and Erik van Blokland. 2010. "WOFF File Format 1.0." Working Draft, W3C, July 27. Accessed 2020-08-14.
- Leatherman, Zach. 2016a. "Lazy Loading Web Fonts Is Probably Not What You Want." Blog, Filament Group, November 16. Accessed 2020-08-15.
- Leatherman, Zach. 2016b. "A Comprehensive Guide to Font Loading Strategies." July 12. Accessed 2020-08-15.
- Leatherman, Zach. 2017. "The Web Font Loading Glossary." Blog, Filament Group, August 13. Accessed 2020-08-15.
- Levantovsky, Vladimir. 2020. "Happy Birthday Web Fonts!" Blog, W3C, July 27. Accessed 2020-08-14.
- Levantovsky, Vladimir, and Ralph Levien. 2018. "WOFF File Format 2.0." W3C Recommendation, March 1. Accessed 2020-08-14.
- Mistry, Jaina. 2019. "The Ultimate Guide to Web Fonts." Blog, Litmus, April 11. Accessed 2020-08-15.
- Moon, Jessica. 2012. "Expand Your Typography Repertoire: 11 Great Web Font Sites." Blog, Telepathy, May. Accessed 2020-08-15.
- Morzinski, Jacob. 2020. "Safe web fonts." MIT. Accessed 2020-08-15.
- Mozilla. 2020. "Web fonts." MDN Web Docs, Mozilla, July 1. Accessed 2020-08-15.
- MyFonts. 2020. "Best Sellers." MyFonts. Accessed 2020-08-15.
- Newcomer, Colin. 2020. "Best Practices for Web Font Preloading + How It Works." Blog, WP Rocket, April 9. Accessed 2020-08-15.
- Parrish, Adam. 2015. "Make your site awesome with web fonts." Creative Freedom Ltd, March 4. Updated 2019-03-27. Accessed 2020-08-14.
- Typotheque. 2020. "Webfonts Tutorial." Typotheque. Accessed 2020-08-15.
- W3C. 2018. "Web Fonts Working Group Charter." W3C, January 11. Accessed 2020-08-14.
- WP Rocket. 2019. "A Guide to Web Font Optimization." Blog, WP Rocket, June 12. Updated 2019-10-01. Accessed 2020-08-15.
- Wikipedia. 2020. "Core fonts for the Web." Wikipedia, August 14. Accessed 2020-08-14.
- Wurtz, David. 2010. "Web fonts on the rise." Blog, Google Fonts, November 2. Accessed 2020-08-14.
Further Reading
- Blancpain, Thierry. 2018. "Understanding Web Fonts and Getting the Most Out of Them." CSS-Tricks, March 27. Accessed 2020-08-15.
- Leatherman, Zach. 2016. "A Comprehensive Guide to Font Loading Strategies." July 12. Accessed 2020-08-15.
- Biľak, Peter. 2019. "Brief History of Webfonts." Typotheque, October 22. Accessed 2020-08-14.
- Levantovsky, Vladimir, and Ralph Levien. 2018. "WOFF File Format 2.0." W3C Recommendation, March 1. Accessed 2020-08-14.
- Daggett, John, and Myles C. Maxfield, (eds). 2017. "CSS Fonts Module Level 4." First Public Working Draft, W3C, July 11. Accessed 2020-08-15.
- Graham, Geoff. 2020. "font-display." CSS-Tricks, March 25. Accessed 2020-08-15.