Using Fonts in Next.js with Google, Local & Tailwind

Learn how to easily incorporate Google Fonts, local fonts, and Tailwind CSS into your Next.js projects for a polished look. 🎨

Using Fonts in Next.js with Google, Local & Tailwind
Tuomo Kankaanpää
35.1K views • Dec 5, 2024
Using Fonts in Next.js with Google, Local & Tailwind

About this video

👉 Looking to start using ADVANCED Next.js features? Click here: https://bit.ly/3OMoQ5m

Next.js fonts are easy to use. With the next/font we can add Google Fonts and local fonts to our projects easily. Nextjs font also optimises the fonts which means we don't make any request to Google Fonts from the browser because the fonts are downloaded in build time. In this video we will take a look on how NOT to use fonts in Next js, how next/font works, how to use Google Fonts with Next.js and how to use custom fonts with Tailwind CSS classes.

👊 Check out these too!
My newsletter: https://tuomokankaanpaa.com/newsletter
Master the Next.js Image Component: Optimize Your App Performance Instantly: https://bit.ly/3yYBFoW
Next.js Route Handlers Cheat Sheet: https://bit.ly/route-handlers-cc

X: https://x.com/tumee
How I Stay Focused: https://brain.fm/tuomo

Timestamps
00:00 What this video is about
00:24 How NOT to use fonts in Next.js
01:57 Important info on how next/font works
03:45 Using Google Fonts the correct way
04:59 Using local fonts in Next.js
06:43 Use fonts in Next.js with Tailwind CSS

#nextjs15 #nextjstutorial #nextjs

Tags and Topics

Browse our collection to discover more content in these categories.

Video Information

Views

35.1K

Likes

629

Duration

9:32

Published

Dec 5, 2024

User Reviews

4.7
(7)
Rate:

Related Trending Topics

LIVE TRENDS

Related trending topics. Click any trend to explore more videos.