Learning on Web Dev Open is free for all.

Design Craft > Type carries itWeb fonts without the flash
Phase 02Type carries it93 of 434

Web fonts without the flash

Self-host, subset, preload, and set a fallback whose metrics match, so the swap stops shoving the page around.

Build26 minAI implements

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Self-host a font with a correct @font-face declaration
  • Choose a font-display strategy deliberately
  • Match fallback metrics with size-adjust to remove the shift
Ask the community

Loading…