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!

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Obnoxiously Readable Responsive Text with Viewport Units
Next
Import your Disqus Comments to Eleventy

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:

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)