A Historical Look at FOUT and FOIT

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

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.

Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2024-03-28T16:58:06+00:00) » A Historical Look at FOUT and FOIT. Retrieved from https://www.scien.cx/2017/09/19/a-historical-look-at-fout-and-foit/.
MLA
" » A Historical Look at FOUT and FOIT." Zach Leatherman | Sciencx - Tuesday September 19, 2017, https://www.scien.cx/2017/09/19/a-historical-look-at-fout-and-foit/
HARVARD
Zach Leatherman | Sciencx Tuesday September 19, 2017 » A Historical Look at FOUT and FOIT., viewed 2024-03-28T16:58:06+00:00,<https://www.scien.cx/2017/09/19/a-historical-look-at-fout-and-foit/>
VANCOUVER
Zach Leatherman | Sciencx - » A Historical Look at FOUT and FOIT. [Internet]. [Accessed 2024-03-28T16:58:06+00:00]. Available from: https://www.scien.cx/2017/09/19/a-historical-look-at-fout-and-foit/
CHICAGO
" » A Historical Look at FOUT and FOIT." Zach Leatherman | Sciencx - Accessed 2024-03-28T16:58:06+00:00. https://www.scien.cx/2017/09/19/a-historical-look-at-fout-and-foit/
IEEE
" » A Historical Look at FOUT and FOIT." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2017/09/19/a-historical-look-at-fout-and-foit/. [Accessed: 2024-03-28T16:58:06+00:00]
rf:citation
» A Historical Look at FOUT and FOIT | Zach Leatherman | Sciencx | https://www.scien.cx/2017/09/19/a-historical-look-at-fout-and-foit/ | 2024-03-28T16:58:06+00:00
https://github.com/addpipe/simple-recorderjs-demo