Next.js w/ Tailwind CSS - Adding Custom Fonts ✍️
In this video I'll show you how to easily add local custom fonts to a Next.js Tailwind CSS web application.
Would you like to virtually invite me for an Italian Espresso Coffee?! ☕
Buy me a Coffee 👉 https://www.buymeacoffee.com/theItali...
It's too easy to use the default preconfigured utility classes fonts already provided by the Tailwind CSS Theme. But what happens if you want to customize more your web design and use your favourite custom fonts?
Take a comfort seat, I will show how to extend the default Tailwind CSS Theme and add your chosen font into a Next.js app in less that 8 minutes 🚀
Useful resources
➡https://github.com/vercel/next.js/tre...
➡ https://tailwindcss.com/docs/theme
➡ https://tailwindcss.com/docs/theme
➡ https://fonts.google.com/specimen/Pac...
➡ https://www.onlinewebfonts.com/woff2-...
Chapters
00:00 intro
00:37 create-next-app --example with-tailwindcss
02:00 Pacifico from Google Fonts and woff2 font conversion
03:56 Add Pacifico font to Tailwind CSS
06:14 Conclusion