Zach’s ugly mug (his face) Zach Leatherman

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.


  • 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.

< Newer
FOIT vs. FOUT, a Side by Side Comparison
Older >
Web Standards Podcast #85

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 81 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 »


IndieWeb Avatar for https://melanie-richards.comfontspeedRoel NieskensDimitris GrammatikoMiguel Ángel UsecheWill ᕙ(⇀‸↼‶)ᕗStephanie HobsonjameschurchmanKean RichmondSmashing MagazineDave HarperFredrik ForsmoRiccardo ErraJason GarberCalabriaFazli RosliAlex ☃Abubaker SaeedAcedia TristitiaGiulia LacoDan RodneyFlorian TruchotVal HeadGabiMichał Gołębiowski-OwczarekMateusz Kamiński نIndieWeb Avatar for


Rachel LeggettDerJP ⚡Jabran Rafique ⚡️Peter HatchBenjmnGBatbayar B.SajadGabiJuan Olvera 🇲🇽 🌮Mahmoud EmaraSun LiMarco PacchiariniPaul Melerogabriel toll stålbomJen GorfineSanjay JoshiMarvin Hagemeister ⚛️ 🇩🇪Boston VandenbergShane DuffTS@KAEDE IS FINALLY HOMEEEE!!!!!Ibrahim CesarMichaelJustin LitchfieldChris DrinkutAlex ☃Abubaker SaeedғᴇᴅᴇAlex Clapperton⚡️ Lindsey Pfeifer ⚡️DudeDedy SetyoLocal ManSpawn DesignWim HaubenPeter GruczaJens GeilingKaiJaime Seva CutillasJohan T.Jacob ProfferTrevor CurtisAlekzack krida is in hawaiiDavid PichGaël PoupardAndy DaviesNaomi See 🎡Ethan MarcotteAdrian D. AlvarezJessPhilip RenichAna TravasSid VishnoiJason PamentalfontspeedScott ClayScott JehlPierNathan SmithDave RupertPatrick KettnerJohn C 💻 🌿 🚀Roel NieskensFotis Papadogeorgopoulosemmett naughtonJohn HobbsPeter Antoniushalvves 🌳Tommy HodginsJuha LiikalaMatthias OttHormiga con cebollaWill ᕙ(⇀‸↼‶)ᕗ
  1. Scott Jehl


    they're all foiting the good fout

  2. Peter Müller


    _______________ ____________

  3. Zach Leatherman


    🏆🏆🏆🏆🏆 but also you gotta foit for your right to party

  4. Zach Leatherman


    I agree completely

  5. Scott Jehl


    meh. it's my party and i'll fout if i want to

  6. Zach Leatherman


    GET FOUT—directed by jordan peele

  7. Ingvar Stepanyan


  8. Phil Hawksworth


  9. Scott Jehl


    did... did he just take her fonts

  10. Nathan Red Blur


    Well you not need to download a new browser to test the “font-display” descriptor attribute in your font definition.

  11. Local Man


    loading thoughtful reply

  12. Zach Leatherman


    It's my job to test in browsers 🤷‍♂️

Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)