885: CSS Fonts Fallbacks, Variable and Trimming

Syntax - Tasty Web Development Treats

Mar 17, 2025•23 min

--:--

Listen in podcast apps:

Apple Podcasts

Spotify

Download

Listen to this episode in Metacast mobile app

Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episode description

Scott and Wes dig into the wild world of CSS fonts—covering fallbacks, variable fonts, and new tricks like text-box-trim. They also break down font-display, font kits, and how to avoid layout shifts when loading custom type.

Show Notes

00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
- Damnit Sans.
02:53 @font-face.
03:27 Font Display.
07:40 Avoiding layout shift.
- Fallbacks.
10:45 Variable fonts.
- Fontaine.
- font-kit
- Wakamai Fondue.
- Syntax Ep. 782.
- Font Variation Settings.
16:23 Variable font sizing.
17:46 v-fonts.
19:10 text-box-trim & text-box-edge.
- text-box-trim examples.
21:28 Browser support.

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

For the best experience, listen in Metacast app for iOS or Android