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…
Смотрите видео Font Optimisation with Next.js, Google Fonts & Tailwind ✒️ онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Ноябрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 6,497 раз и оно понравилось 144 людям.