Next.js & Tailwind Font Optimization with Google Fonts ✒️

Let's establish some brand identity in our app!

We'll be using the Font Optimization feature of Next.js to add a web font provided by Google Fonts, while being mindful of our Core Web Vitals... and we're gonna configure Tailwind to use our new font! 🖋️

More in our "An app with Next.js" series: https://youtube.com/playlist?list=PLXI-025xKZRNM2n7aGpbMyhJRr3YRfIuN

Highlighted software:
Next.js: https://nextjs.org/docs/basic-features/font-optimization
Google Fonts: https://fonts.google.com/
Tailwind CSS: https://tailwindcss.com/

🎶 Moorlands by Ealot is the background music 🎶
background music 🎶

See the code: https://github.com/jmagrippis/eri

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

My own website: https://magrippis.com/

--
TIMESTAMPS
--
0:00 - Custom fonts, brand identity and performance
0:42 - Using Google Fonts
1:02 - Next.js setup
1:55 - Rendering with Tailwind
2:53 - Add a fancy font!
3:46 - Next up…