This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
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 | FOIT (1st) | Safari (v3.2) added @font-face support, first introducing FOIT to the world. |
| 2008 | FOIT (2nd) | Chrome (v1.0) added @font-face support (was using WebKit 528) |
| 2009 | FOUT (2nd) | Firefox (v3.5) added @font-face support |
| 2009 | FOUT | Opera (v10.1) added support |
| 2010 | FOIT | Mobile Safari (v3.2) added @font-face support (SVG format only) |
| 2011 | FOIT | Mobile Safari (v4.3) added a few more popular @font-face formats |
| 2011 | FOIT 3s (1st) | Firefox (v4.0) switched to add a FOIT timeout, the first browser to FOIT with a timeout. |
| 2012 | FOIT 3s (2nd) | Opera (v12.1) switched to add a FOIT timeout |
| 2013 | FOIT | Chrome (v28) switched to the Blink rendering engine, keeping the FOIT |
| 2013 | FOIT | Opera (v15) switched to the Blink rendering engine, switching from FOIT with a timeout to FOIT without a timeout. |
| 2014 | FOIT 3s | Chrome (v35) switched to add a FOIT timeout |
| 2014 | FOIT 3s | Opera (v22) followed Blink and added a FOIT timeout (again) |
| 2015 | FOUT | Edge (v12) released, maintaining IE’s beautiful default FOUT behavior. |
| 2016 | FOIT 3s | Safari (v10) finally added a FOIT timeout, almost eight full years after introducing FOIT to the world. |
| 2017 | 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 | font-display (2nd) | Opera (v47) was second to add support for font-display. |
| 2018 | font-display | Firefox (v58) adds font-display support |
| 2018 | font-display | Safari (v11.1) adds font-display support |
| 2018 | font-display | Samsung Internet (v8.2) adds font-display support |
| 2020 | FOIT 3s | Edge (v79) switches to Chromium and the now-cross browser standard of FOIT with a timeout is complete. |
| 2020 | 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-displaydescriptor.
This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
Zach Leatherman | Sciencx (2017-09-19T05:00:00+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.