Zach’s ugly mug (his face) Zach Leatherman

font-display is Incompatible with Icon Fonts

May 22, 2019

There are myriad problems with icon fonts. I won’t rehash those again here but I did a section on this specific topic in The Scoville Scale of Web Font Loading Opinions. A bunch of people have written about this before:

The main point that I think hasn’t really been communicated enough is that icon fonts exist in a place that would seem to be outside of the web standards mainstream. Specifically, the font loading poster child—the font-display descriptor—has no valid value that is compatible with icon fonts.

When you load an icon font, you often never want the fallback text to render. It isn’t a typical Flash of Unstyled Text (FOUT) scenario. If the fallback text for an icon font renders, who knows what you might see.

If the icon font uses glyphs mapped to the Private Use Area, you may see emoji characters (this is a common failure scenario).

Screenshot of the Private Use Area (with emoji) on iOS

If the icon font uses ligatures, you could see the ligature text (which is better, but often also not handled very well).

Screenshot of the Ligature icon fallback of Google News (showing overlapping text with content)

Some browsers (Firefox) show a TOFU character as fallback.

Twitter Icon Font Fallback Screenshot

An astute web font loading reader might reach for the easiest tool in the toolbox to solve font loading issues: the font-display descriptor. However there are no good values for font-display that will offer invisible text. In fact, a few of the values will be quite bad.

  • Using font-display: optional on your icon font means that it will only render on repeat views and renders fallback text on empty cache views: Very Bad 🚫
  • Using font-display: swap on your icon font means that it will render fallback text immediately while waiting for the web font to finish loading: Bad 🚫
  • Using font-display: fallback will only render the icon font if it loads within a short (usually 3 second) time period: Not great 🚫
  • Using font-display: block is the default behavior and will use invisible text for up to 3 seconds and show fallback text until the web font load completes: The best option but still not good 🚫

To workaround these issues, you could use the CSS Font Loading API to force invisible text until the icon font has successfully loaded. Or, perhaps more in line with the web standards mainstream, you could make a better investment and convert your icons to use SVG instead.


< Newer
The Co-opetition of Team Web
Older >
Web Engineering Düsseldorf

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and 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 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

40 Reposts

Sara Soueidannils binder 🏳️‍🌈Hrvoje BlažekovićstrongestVincent De OliveiraDimitris GrammatikoAndy DaviesCristiano RastelliJens TangermannKellyAnthony BarréFresh Frontend LinksComandeerAmandeep singhEevert NoviusNicolas HoizeyKevin Garcia@thomas@social.tzi.frRomaric Pascal_fazTodd ParkerJason Grigsby, ☁4dailydevlinks.Stéphanie WalterAdrian Roselli 🗯Friday Front-EndIndieWeb Avatar for https://recreationandleisure983702521.wordpress.comIndieWeb Avatar for https://sportmedblog.wordpress.comIndieWeb Avatar for https://statisticssources.wordpress.comIndieWeb Avatar for https://socialworkandsocialissues.wordpress.comIndieWeb Avatar for https://findinggrantsandlearninggrantadministrationskills994981200.wordpress.comIndieWeb Avatar for https://prismo.xyzIndieWeb Avatar for https://stephaniewalter.designIndieWeb Avatar for http://mailsgun.ruIndieWeb Avatar for http://www.dubado.comIndieWeb Avatar for https://wpdesignherald.wordpress.comIndieWeb Avatar for https://find-right-software.comIndieWeb Avatar for https://unsorted.coIndieWeb Avatar for https://www.alvinashcraft.comВеб-стандарты

60 Likes

Elena RamírezSam🐩🥓🛻🇺🇸♓🍄🌼🌈🎮☕🚲💻.icpJens GeilingHerbert BraunGrace SnowpuryshoFlorian ThomaTiro TypeworksRattleknife Designfabian wohlgemuth (he/him)fakefunkRoel NieskensTylerNudgeCloudEric WallaceDave 🧱Jean-Pierre VincentDaniel SchildtAaron PetersSamar PandaErik VorhesC KhalifaThomas DikSam SnellingAmandeep singhJalal AzimiJSamuel HauserŠime VidasPaul MeleroVeniamin KrolMattia AstorinoEl niño del pixelDaniel KosterMarco useCauseAndEffect()Coco MarzJens TangermannTaty GrassiniOtodayoCristiano RastelliShahriar MayeenAllison SigristOsman YazıcıAndrewIngo Steinke 🇪🇺PaulDannie VintherJohn PalaganasThanh TrầnPatrick Johnson (pbj)Riccardo ErraJuha Liikala 👾Daniel CanetVuildNicolas FerrandUnusable PodcastMark HähnelHrvoje Blažekovićnils binder 🏳️‍🌈
8 Comments
  1. Jeff Knaack

    @knaackbuilt

    It always hurts a little when a project has such a baked in reliance on icon fonts and you can’t prioritize the time to remove them 😬

  2. Zach Leatherman

    @zachleat

    Doing Our Best in 2022 (as a service)

  3. NudgeCloud

    @NudgeCloud

    foNt iCOnS CoNSiDeREd hARmFul.

  4. Roel Nieskens

    @PixelAmbacht

    yeP, NO WaY TO BEAt FoUt iFN't you UsE THe jaVAsCriPT.

  5. Grace Snow

    @gracesnow

    I didn't know that! I don't like icon fonts but some legacy projects still have them. I didn't realise about font-display

  6. Westbrook

    @WestbrookJ

    How do you feel about fonts that use ligatures instead of glyphs so that you can write <span class="icon-font">gear</span> so with `font-display: swap` it will say "gear" until the font loads it upgrades it to the gear icon?

  7. Roel Nieskens

    @PixelAmbacht

    It's a cute feature, but not a saving grace. It can cause serious layout reflow, and:

  8. Zach Leatherman

    @zachleat

    I think it also sidesteps mainstream i18n workflows, too

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

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)