The Performance and Usability of Font Loading—Velocity Santa Clara

My beautiful daughter was born exactly 26 days before the Velocity Conference. The other parents in my life warned me what having a new child would be like—you live your life in one hour increments between feedings, twenty four hours a day. I did not heed their warnings and used many of those sleep-deprived increments to make a brand new presentation on Web Fonts for Velocity.

• Slides on Speakerdeck
• Video on YouTube
• Storify Scrapbook
• Velocity Session Link

Topics and Related Links

• Weight versus Perceived Performance of different asset types (00:45)
  • (see also More Weight Doesn’t Mean More Wait by Scott Jehl)
• Font Formats (WOFF2, WOFF, OTF/TTF, SVG) (03:25)
  • WOFF2 is 30% Smaller
• Triggering a @font-face Download (Attached Elements, unicode-range) (04:13)
• @font-face matching font-weight, font-style (Faux Bold and Italic) (07:24)
  • font-synthesis support on State of Web Type
• Behavior while Downloading (FOIT, FOUT) (15:06)
  • Facebook.com WebPageTest Result
  • Google’s “250ms is a Big Deal” Quote
  • @TheMattShull quote, 3 seconds means 40% abandonment
  • Apple WebPageTest Result
• The Mitt Romney Web Font Problem (19:05)
  • James Muspratt’s Original Tweet
• FOUT versus Progressive JPEG (21:21)
• Font Loading Anti-Patterns (23:01)
• Cross-browser solutions for FOUT and FOIT, Flash of Faux Text (26:48)
  • font-rendering Specification
  • CSS Font Loading API
  • Polyfills: FontFaceOnload and fontfaceobserver
• Minimizing FOUT to Web Font Reflow (32:39)
  • fontfamily.io, Compatibility Tables for Installed Fonts
  • Jason Pamental’s Blog Post on styling Fallback Fonts

Thank You

A huge thanks to Steve Souders for goading me into submitting a proposal to the conference—I had a great time. It was amazing to finally meet Steve in person as well as Katie Kovalcin and Bruce Lawson, people I had only known previously through the magic of the Internet.