Using the new next/font package | NextJs 13 series

How to self-host your fonts using the new next/font package in NextJs 13 to improve your core web vitals by preventing cumulative layout shift that typically happens when loading fonts from external hosting services like google fonts.

👉🏼 The Ultimate NextJs Course

👉🏼 @next/font documentation

👉🏼 What is cumulative layout shift

CHAPTERS

0:00 Intro
0:30 Getting started
3:00 Cumulative layout shift
3:20 next/font package
5:40 Using custom fonts
6:00 With tailwind
9:04 Outro

[alvin]

Finally, this video solved my issue!

For some reason the docs just seem a bit too high level and no detailed explanation and details were given there. This video is the best!

[jycqgek]

Thx, helpful guide! I've solved my CLS trouble!

[mustaqimanwar]

my issue is, in the google font didn't have the font that i want to use, so i upload it into cdn, how i can use cdn on next?

[balanceandbuild]

How about a scenario where I am using multiple local fonts? How to do pass and use multiple fonts in the child components as required?

[rayhankessal]

Awesome stuff Hamed, have you ever worked with java as backend?

[amouzande]

hi there,
when i added my font locally the nextjs compiler does not embedded the fonts? would you help me with that?

[ICOReviewtoken]

Why do you use App dir ? page is nextjs 12 ?

[rubialalom]

Awesome video Hamed. Can you also make a video on how to place google adsense code on sites built using next.js 13?

[ICOReviewtoken]

Please make tutorial i18n in nextjs 13, Is there a way when attaching links to detech locale, I mean, I don't have to pass locale in every time I need to attach a link

[rezamohammadzadeh]

How can we use local font with Tailwindcss

[takeiteasy]

I wish they would stop changing how to do shit holy shit, they update how to install the package but don't update the api documentation and examples.