Zach’s ugly mug (his face) Zach Leatherman

preload with font-display: optional is an Anti-pattern

April 20, 2018

Most of the quick win font loading advice I’m seeing right now (and some that I give out) involves combining preload and the font-display CSS descriptor.

Just to level-set, preload is a way to trigger your web font requests sooner, putting them higher in the network request waterfall. font-display is a way to declaratively control your font loading behavior by adding a descriptor to your @font-face block.

Read more at The Comprehensive Guide to Font Loading Strategies

Lately, I’ve seen a few developers recommend font-display: optional. font-display: optional puts your web fonts on the back burner and only renders them on repeat primed-cache visits. It’s a perfectly acceptable method if web fonts are lower on the priority list for your use case’s requirements. For the record, I’m not a huge fan of optional because I like to at least attempt to render web fonts on an empty-cache visit. Caveat: in “The Compromise,” font-display: optional is emulated for browsers that do not support the CSS Font Loading API, a method to start moving away from using font loading polyfills for modern browsers.

However, after seeing some confusion on Twitter, I think it’s probably worth noting that if you decide to use font-display: optional, it would be a waste of your page’s resources to also use preload. It won’t break anything, it’ll just trigger that web font request early (causing network congestion if you have other critical path resources that need to be fetched). An early request won’t buy you much if the web fonts aren’t going to render when they finish.

  • preload with font-display: optional: Not great ⚠️
  • preload with font-display: swap: Good ✅
  • preload with font-display: fallback: Good ✅
  • font-display: block with anything: Bad 🚫

Hope that clears up some of the confusion!


< Newer
Obnoxiously Readable Responsive Text with Viewport Units
Older >
Import your Disqus Comments to Eleventy

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome 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 83 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 »

27 Reposts

IndieWeb Avatar for https://prema.kapilaya.netIndieWeb Avatar for https://imjohnainsworth.comIndieWeb Avatar for https://www.yogitatrainingcenter.comIndieWeb Avatar for https://www.splendidwebsites.comIndieWeb Avatar for https://imaginemarketingonline.esIndieWeb Avatar for https://imaginemarketingonline.esIndieWeb Avatar for https://nice-space.comIndieWeb Avatar for https://docuneedsph.comIndieWeb Avatar for http://marketingtumbler.comIndieWeb Avatar for https://webdesigntips.blogIndieWeb Avatar for https://wpwerk.comIndieWeb Avatar for https://www.new.pixel-forge.caIndieWeb Avatar for https://www.smashingmagazine.comIndieWeb Avatar for https://business2020.xyzIndieWeb Avatar for http://adharidshop.liveIndieWeb Avatar for https://gsensenews.comIndieWeb Avatar for http://niclink.irIndieWeb Avatar for https://hostulum.comIndieWeb Avatar for https://emcihubtechltd.co.keIndieWeb Avatar for https://webdesign.idjgie.xyzIndieWeb Avatar for https://www.smashingmagazine.comIndieWeb Avatar for https://allprowebdesigns.comIndieWeb Avatar for https://www.webmastersgallery.comIndieWeb Avatar for https://smartphonephotography.inIndieWeb Avatar for http://unsorted.coAlla Gringausrealfish Q.
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)