A Historical Look at FOUT and FOIT

September 19, 2017

May 9, 2019 updated with font-display support.

January 15, 2020 updated with Edge Chromium information.

Prerequisite: not sure what FOUT or FOIT are? Read the definitions on the Web Font Loading Glossary.

For a recent talk at CSS-Minsk-JS, I did some research on the history of default font loading behaviors. I thought it was interesting, so I packaged it up below.

Year	Behavior	Description
1997		CSS 2 Fonts W3C Working Draft
1997	FOUT (1st)	Internet Explorer (v4) added @font-face support, first introducing FOUT to the world.
1998		CSS 2 Fonts W3C Recommendation
2008 Nov 12	FOIT (1st)	Safari (v3.2) added @font-face support, first introducing FOIT to the world.
2008 Dec 11	FOIT (2nd)	Chrome (v1.0) added @font-face support (was using WebKit 528)
2009 Jun 29	FOUT (2nd)	Firefox (v3.5) added @font-face support
2009 Aug 31	FOUT	Opera (v10.1) added support
2010 Apr 2	FOIT	Mobile Safari (v3.2) added @font-face support (SVG format only)
2011 Mar 8	FOIT	Mobile Safari (v4.3) added a few more popular @font-face formats
2011 Mar 22	FOIT 3s (1st)	Firefox (v4.0) switched to add a FOIT timeout, the first browser to FOIT with a timeout.
2012 Nov	FOIT 3s (2nd)	Opera (v12.1) switched to add a FOIT timeout
2013 Jul	FOIT	Chrome (v28) switched to the Blink rendering engine, keeping the FOIT
2013 Jul 2	FOIT	Opera (v15) switched to the Blink rendering engine, switching from FOIT with a timeout to FOIT without a timeout.
2014 May	FOIT 3s	Chrome (v35) switched to add a FOIT timeout
2014 Jun	FOIT 3s	Opera (v22) followed Blink and added a FOIT timeout (again)
2015 Mar	FOUT	Edge (v12) released, maintaining IE’s beautiful default FOUT behavior.
2016 Sep 20	FOIT 3s	Safari (v10) finally added a FOIT timeout, almost eight full years after introducing FOIT to the world.
2017 Jul 24	font-display (1st)	Chrome (v60) was first to implement `font-display`, allowing developers control over default FOUT and FOIT behavior with a CSS descriptor.
2017 Aug 8	font-display (2nd)	Opera (v47) was second to add support for `font-display`.
2018 Jan 22	font-display	Firefox (v58) adds `font-display` support
2018 Mar 28	font-display	Safari (v11.1) adds `font-display` support
2018 Dec 29	font-display	Samsung Internet (v8.2) adds `font-display` support
2020 Jan 15	FOIT 3s	Edge (v79) switches to Chromium and the now-cross browser standard of FOIT with a timeout is complete.
2020 Jan 15	font-display	Edge (v79) switches to Chromium and gets `font-display` support

Browsers implementing a FOUT/FOIT/FOIT-3s behavior first (trailblazers) are denoted as (1st) above. Browsers second to implement an existing behavior (two makes a crowd) are denoted as (2nd) above.

This list is limited to stable releases, and does not include information about dev channel/beta/technology previews.

Highlights

Microsoft’s adherence to FOUT. It’s the most reliable way to render web fonts without the perceived performance penalties and race conditions that come with FOIT so honestly, I admire this. They were first and they’ve stuck to their guns.
Opera has been the most volatile of the bunch, mostly because of the unfortunately timing of their rendering engine switch.
I was disappointed at how much influence WebKit/Safari’s choices had on other browsers. I know how much of a pain point the default FOIT behavior is for developers and so it’s been a little disheartening to read those early bug tracker discussions. I’m glad they’ve added a FOIT timeout but we need a cross-browser way to easily control FOIT and FOUT—we need wider support for the font-display descriptor.

Zach Leatherman is a builder for the web at Font Awesome and the creator/maintainer of Eleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 85 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »