Zach’s ugly mug (his face)

Zach Leatherman

font-display is Incompatible with Icon Fonts

May 22, 2019 #4 Popular

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.


Todd Parker_fazRomaric Pascal@thomas@social.tzi.frKevin GarciaNicolas HoizeyEevert NoviusAmandeep singhComandeerFresh Frontend LinksAnthony BarréJens TangermannCristiano RastelliAndy DaviesDimitris GrammatikostrongestHrvoje Blažeković


Jean-Pierre VincentDaniel SchildtAaron PetersSamar PandaErik VorhesC KhalifaThomas DikSam SnellingAmandeep singhJalal AzimiJSamuel HauserŠime VidasPaul MeleroVeniamin KrolMattia AstorinoEl niño del pixelDaniel KosterMarco useCauseAndEffect()Jens TangermannCoco MarzTaty GrassiniOtodayoCristiano RastelliShahriar MayeenAllison SigristAndrewOsman YazıcıIngo Steinke 🇪🇺PaulDannie VintherJohn PalaganasPatrick Johnson (pbj)Thanh TrầnRiccardo ErraJuha Liikala 👾Daniel CanetVuildNicolas FerrandUnusable PodcastMark HähnelHrvoje Blažekovićnils binder 🏳️‍🌈
22 Mentions
  1. #

  2. #

  3. #

  4. #

  5. jwneastro @ #

    lcarlson May 29 +++ WEB DESIGN UPDATE. – Volume 17, Issue 49, May 29, 2019. An email newsletter to distribute news and information about web design and development. ++ISSUE 49 CONTENTS. SECTION ONE: New references. What’s new at the Web Design Reference site? New links in these categories: 01: ACCESSIBILITY. 02: CASCADING STYLE SHEETS. 03: EVALUATION & TESTING. 04: EVENTS. 05: HTML. 06: MISCELLANEOUS. 07: NAVIGATION. 08: STANDARDS, GUIDELINES & PATTERNS. 09: TYPOGRAPHY. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Contextually Marking up Accessible Images and SVGs By Scott O’Hara. “…there are various methods that can be used to provide an accessible name to an image or SVG element…depending on the markup pattern and the method used, the accessible name may not be exposed as expected, due to quirks or gaps in implementations. This means that without testing, graphics may not be exposed in the manner in which you might expect…” The Difference Between Keyboard and Screen Reader Navigation By Léonie Watson. “…Whether someone is a keyboard user or a screen reader user, the importance of HTML cannot be emphasised enough. Without well-formed HTML that uses the appropriate element for the purpose, screen reader navigation breaks down completely, and keyboard navigation is at a high risk of doing the same…” The difference between keyboard and screen reader navigation Accessible Icon Buttons By Sara Soueidan. “An icon button is an icon that triggers some sort of action on the page…” Tabindex: It Rarely Pays to be Positive By Scott O’Hara. “HTML’s tabindex attribute may be used to modify whether an element can receive keyboard focus, or not…” 2.1.4 Character Key Shortcuts – WCAG 2.1 – Level A By Rakesh Paladugula. “If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true…” 2.1.4 Character Key Shortcuts – WCAG 2.1 – Level A Dragon and Accessible Names on the Web (Video) By Eric Wright. “A brief demonstration of “What You See Is What You Say” in a web browser, and how interaction changes when I only have to say part of an element’s accessible name. Elements should be named carefully to enable intuitive interactions…” Here are 23 Terms You Should Know to Better Understand Accessibility By Julie Zeglen, Jonah Freedman et al. “Audism, multi-modality and Section 508: We built a glossary based on local experts’ suggestions of the terms they think everyone should learn…” Here are 23 terms you should know to better understand accessibility A Model for WordPress Accessibility By Adrian Roselli. “I am going to propose a way to increase the overall accessibility of the WordPress ecosystem…” A Model for WordPress Accessibility +02: CASCADING STYLE SHEETS. Digging Into The Display Property: Grids All The Way Down By Rachel Andrew. “Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior…” +03: EVALUATION & TESTING. Questionnaire Design: An Interview with Annie Pettit (Podcast) By Gerry Gaffney. “My guest today is a market research methodologist who specializes in survey design and data quality…” Macro & Microconversions as Metrics in Analytics (Video) By Kathryn Whitenton. “The most desired user actions (macroconversions) may be too rare to generate enough analytics data for fast design iteration, so we can also analyze smaller user actions (microconversions) that are more frequent and are connected to bigger goals.” +04: EVENTS. Web Accessibility Evaluation for Non-Technical Users (3-part course) June 10, 12, and 14, 2019. Online. Minnesota Assistive Technology (AT) and Accessibility Summit June 13-14, 2019. St. Paul, Minnesota, U.S.A. Web Accessibility Evaluation for Technical Users (3-part course) June 17, 19, and 21, 2019 Online. Access Technology Higher Education Network (ATHEN) Virtual Conference June 21, 2019. Online IndieWeb Summit June 29-30, 2019. Portland, Oregon, U.S.A. Audio Description Institute July 10-12, 2019. Rochester, New York, U.S.A. Chicago UX Conference September 7-13, 2019, U.S.A. Chicago, Illinois, U.S.A. Accessibility Scotland October 25, 2019. Edinburgh, Scotland Accessibility Scotland 2019 +05: HTML. What Have HTML5 Elements Ever Done for Accessibility? (Slides) By Graham Armfield. “It’s a story of good intentions that haven’t always been carried through into a good implementation.” Placeholder: The Piss-Take Label By Steve Faulkner. “The reasons why use of the placeholder attribute as the only means of providing a user readable prompt for a form control is deficient UX, are voluminous…” +06: MISCELLANEOUS. Plain Text vs. HTML Emails: Which Is Better? [New Data] By Niti Shah. “…Although people say they prefer HTML-based and image-based emails, in reality, simpler emails perform best — and plain-text emails perform best of all…” +07: NAVIGATION. How Many Items in a Navigation Menu? (Video) By Page Laubheimer. “A key question in information architecture (IA) is to decide the number of items in navigation menus (including global menus and local menus). 4 main factors determine the answer, but it’s not 7, despite a common myth.” +08: STANDARDS, GUIDELINES & PATTERNS. W3C and WHATWG to Work Together to Advance the Open Web Platform By Jeff Jaffe. “…Motivated by the belief that having two distinct HTML and DOM specifications claiming to be normative is generally harmful for the community, and the mutual desire to bring the work back together, W3C and WHATWG agree to the following terms…” W3C and WHATWG to work together to advance the open Web platform +09: TYPOGRAPHY. Typography Terms Cheat Sheet By Therese Fessenden. “Typography concepts can sometimes get lost in translation between researchers, developers, designers, and stakeholders. Use this cheat sheet to help you decode the meaning of common or often mistaken typography terms.” The State of Fluid Web Typography By Matej Latin. “Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used?…” font-display is Incompatible with Icon Fonts By Zach Leatherman. “There are myriad problems with icon fonts…” +10: USABILITY. User Needs, and Why Your Organization Doesn’t Care About Them By Padma Gillen. “We are excited to share this excerpt from GatherContent’s book Lead with Content…” User needs, and why your organization doesn’t care about them ‘About Us’ Information on Websites By Anna Kaley and Jakob Nielsen. “Users expect About Us sections to be clear, authentic, and transparent. They compare corporate content with third-party reviews to form a holistic opinion of a company before initiating business or applying for jobs.” [Section one ends.] ++ SECTION TWO: +11: What Can You Find at the Web Design Reference Site? Accessibility Information. Association Information. Book Listings. Cascading Style Sheets Information. Color Information. Drupal Information. Evaluation & Testing Information. Event Information. HTML Information. Information Architecture Information. JavaScript Information. Miscellaneous Web Information. Navigation Information. PHP Information. Sites & Blogs Listing. Standards, Guidelines & Pattern Information. Tool Information. Typography Information. Usability Information. XML Information. [Section two ends.] ++END NOTES. + SUBSCRIPTION INFO. WEB DESIGN UPDATE is available by subscription. For information on how to subscribe and unsubscribe please visit: The Web Design Reference Site also has a RSS 2.0 feed for site updates. + TEXT EMAIL NEWSLETTER (TEN). As a navigation aid for screen readers we do our best to conform to the accessible Text Email Newsletter (TEN) guidelines. Please let me know if there is anything else we can do to make navigation easier. For TEN guideline information please visit: + SIGN OFF. Until next time, Laura L. Carlson Information Technology Systems and Services University of Minnesota Duluth Duluth, MN U.S.A. 55812-3009 mailto:lcar… [Issue ends.] Advertisements Share this: Twitter Facebook Like this: Like Loading... Related

  6. #

  7. #

  8. Friday Front-End

    Friday Front-End @fridayfrontend #

    font-display is Incompatible with Icon Fonts, by @zachleat…

  9. Adrian Roselli 🗯

    Adrian Roselli 🗯 @aardrian #

    “fONT-dIsPLaY iS inCOMpAtIblE WiTH icON FONts” ZaCHLEat.COm/Web/FonT-dISpl… aS iF yOu needed More ReAsOns To avoId ICON FOnts.

  10. Stéphanie Walter

    Stéphanie Walter @WalterStephanie #

    #CSS #FoNt #PeRFormance FonT-DISPlAY iS INcoMpaTiBLE WiTh ICoN fOnTS, Meeeh This Is not COOL ZaChLeAt.CoM/WEb/foNT-dISpL…

  11. dailydevlinks.

    dailydevlinks. @dailydevlinks #

    font-display is Incompatible with Icon Fonts:… #html #css #javascript #webdev #dailydevlinks

  12. #

  13. #

  14. #

  15. Jason Grigsby, ☁4

    Jason Grigsby, ☁4 @grigs #

    Love this article. Icon fonts on the web have always been a hack. A clever hack mind you, but a hack nonetheless. The font-display property is designed to speed up fonts and offer fallbacks. The fact it doesn’t work for icon fonts highlights that they are a hack we should avoid.

  16. #

  17. #

  18. #

  19. Kelly

    Kelly @kellytle #

    Team SVG

  20. Vincent De Oliveira

    Vincent De Oliveira @iamvdo #

    Another great point on using SVG for icons 👍

  21. nils binder 🏳️‍🌈

    nils binder 🏳️‍🌈 @supremebeing09 #

    So please stop using Icon Fonts ... SVG is awesome. Working with SVG can be hard at first, but in the end, it is so much fun!

  22. Sara Soueidan

    Sara Soueidan @SaraSoueidan #

    One more reason you shouldn’t be using icon fonts. 👏🏻 It’s 2019. Use #SVG.