A Historical Look at FOUT and FOIT
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.Sorry, your browser doesn't support embedded videos. Try downloading it instead.
|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.|
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.
- 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