Syntax - Tasty Web Development Treats

885: CSS Fonts Fallbacks, Variable and Trimming

17 snips
Mar 17, 2025
Dive into the fascinating world of CSS fonts, where fallbacks and variable fonts take center stage. Discover how to optimize font loading and avoid layout shifts that can disrupt user experience. Learn about the innovative text-box-trim feature, giving developers better control over typography. The discussion also highlights essential tools for managing custom fonts and the latest browser support challenges. Perfect for anyone looking to elevate their web design game!
Ask episode
AI Snips
Chapters
Transcript
Episode notes
ADVICE

Font Display Strategies

  • Use the font-display property to control how custom fonts render while loading.
  • Choose auto for automatic handling, or swap or fallback for more control over layout shifts.
ADVICE

Avoiding Layout Shift

  • Avoid layout shifts by using ascent-override, descent-override, and line-gap-override.
  • Tools like Font Kit and Next.js Fontaine automate the process by measuring font metrics.
INSIGHT

Variable Font Exploration

  • Variable fonts offer extensive customization through font variation settings, unlike standard font properties.
  • Use Wakamai Fondue to explore a variable font's capabilities and generate CSS classes for easy implementation.
Get the Snipd Podcast app to discover more snips from this episode
Get the app