Switch to next/font in Next.js for Easy Fonts

💸 Get Source Code for Free! Grab Now - https://www.thapatechnical.com/2025/06/nextjs-series-in-2025.html

Say goodbye to old ways of adding fonts using external links or CSS! In this video, you'll learn how to use the powerful next/font module in Next.js to import and optimize fonts like a pro. We'll walk you through subsets, applying fonts, handling multi-word fonts like "Work Sans", and why you no longer need the weight property.

Extra Link:

------------------------------------------------------------------------
🚀 Boost Your Skills with these Pre-Requisite Videos:

🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE
🔗 Best CSS Course - https://youtu.be/MSICFljRcb4
🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8
🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8

------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html

------------------------------------------------------------------------
✌️ Join Us!

🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join
📷 Connect on Instagram: https://www.instagram.com/thapatechnical
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6

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

⌛TIMELINE⏳
0:00 Fonts in Next.js
0:20 How We Used Google Fonts Before
2:57 How to Use Fonts with next/font in Next.js
4:14 What is Subset in next/font
7:30 Applying Fonts in a Next.js App
8:50 How to Use Fonts with Two Words (e.g., Work Sans)
11:00 Why Weight Property is Not Required in next/font
12:20 Upcoming Videos Preview