Font Optimisation with Next.js, Google Fonts & Tailwind ✒️
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: • An App with Next.js
Highlighted software:
Next.js: https://nextjs.org/docs/basic-feature...
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…
Watch video Font Optimisation with Next.js, Google Fonts & Tailwind ✒️ online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 November 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,497 once and liked it 144 people.