Get my course for $20 off at https://learnastro.dev
Use coupon: YOUTUBE 

🔗  Key Links 🔗
- Fonts Docs: https://docs.astro.build/en/guides/fonts/
- Github repo: https://github.com/coding-in-public/astro-fonts-api-introduction

Fonts seem simple until they're not. Astro's brand-new Font API handles all the tricky parts automatically — privacy concerns, layout shift, type safety, build-time optimization — so you don't have to.

- Why pulling fonts directly from Google Fonts is problematic (privacy leaks, no type safety, layout shift)
- How to set up Astro's Font API in `astro.config.mjs` using font providers like FontSource, Google, and Local
- Using CSS variables and the `Font` component to apply fonts across your site
- Configuring specific weights, styles, subsets, and fallbacks per font
- How fonts are downloaded **at build time** (not per visitor) to protect user data
- Working with **local fonts** and the `variants` + `src` options required
- Using **variable fonts** with a full weight range (e.g., 100–900) for maximum flexibility
- Exploring the granular font config options in the docs: caching, optimized fallbacks, unicode range, and more

---------------------------------------

0:00 Intro
0:19 Problems with Google Fonts (Privacy, Type Safety, Layout Shift)
2:30 Setting Up the Astro Font API
2:50 Providers, Names & CSS Variables
3:22 Configuring Fallbacks
3:57 Adding More Fonts (Instrument Serif, JetBrains Mono)
4:25 Using the Font Component
4:50 Specifying Weights, Styles & Subsets
5:39 Local Fonts Walkthrough
6:02 Font Providers Overview
6:11 Local Font Options & Variants Array
7:10 Variable Fonts & Weight Ranges
8:23 Granular Config & Optimized Fallbacks
9:16 Styles, Weights, Subsets & Experimental Glyphs

🌐 Connect With Me 🌐 
- Astro course: https://learnastro.dev
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog

🤝 Follow Me 🤝
- Twitter: https://twitter.com/cpenned
- BlueSky: https://bsky.app/profile/codinginpublic.dev

💸 Support Me 💸
- Patreon: https://www.patreon.com/coding_in_public
- Buy Me a Coffee: https://www.buymeacoffee.com/chrispennington

Coding in Public

Astro's new experimental Fonts API solves common web font headaches including privacy concerns (no user IP sent to Google), layout shift, lack of type safety, and unnecessary font downloads. The API downloads fonts at build time rather than runtime, keeping them local to your site. Configuration happens in astro.config.mjs with support for multiple font providers (Google, Fontsource, Adobe, Bunny, local, npm), CSS variables, specific weights/styles/subsets, local fonts, and variable fonts. An optimized fallback feature reduces cumulative layout shift by generating fallback fonts that closely match the target font's metrics.

Astro's new Fonts API