Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)

#nextjs #react

[caleblovell]

Wow, this looks amazing. I hate seeing the CLS from font fallbacks on sites. Now I want to upgrade to Next 13 just for this!

[faizanahmed]

Thank you Lee for in depth explanation!

[kp]

Wow, thanks this video, Lee! So helpful.

[hynekss]

This is neat! It works like a charm right off the bat.

[TeleRocker]

Thanks Lee, another reason to love Next.js!

[official.mhm]

Thanks for detailed explanation Lee Rob ❤️

[_ash]

Thank you so much, this is a very quality channel!

[josepedro]

Awesome video! Helped a lot, Thank you!

[charliegunthers]

thanks. i felt like an absolute dummy trying to do this reading from the nextjs docs

[phucnguyen]

Cool glasses, Lee xD
And yes, I was able to implement the same thing here on the video through reading the docs - really lovely to have the native support from Next for sure.
Not really related to Next 13 - but is there a plan to support Analytics out of the box for other frameworks than Next/Nuxt/Gastby as of right now?

[codinginflow]

Is there any estimate when the new app directory will become stable and the default?

[doylemichael]

So how do you add multiple fonts to an app directory? I want to have two different google fonts globally accessible on my site

[Chris-hrlt]

the tailwind part was so hard to find, thanks a lot for the video

[Morimove]

i landed here from official next js documentaion. btw i already watched it and again i am here.

[mikesoertsz]

What about if we want to load a secondary font as well? I've not seen an explanation of that anywhere. Good design usually has 2 brand fonts + web-safe fonts.

[glusa]

Thanks for the video! So intrigued how you move your cursors seamlessly. And the cursor isn’t blinking! Are you using some kind of extension?

[satindar]

Just a heads up, if you created the project with the latest flag, next font is automatically installed so no need to run npm i @next/font :)

[joseandkris]

The only thing that bothers me here is 2x `main` tag, suggesting non-semantic html. + extra html uneeded tag. Also, what if I need 2 or more fonts loaded?

[nbo]

This is great but how do i use several different fonts? for example, the title of my hero section uses a different font than the rest of the app. Every tutorial talks about only applying one font to the entire page.

[ICOReviewtoken]

Hi bro. I have a custom font that I want to import locally but it doesn't accept it. Also if I want to give users the ability to choose their own fonts when using, for example users will set the font for different title tags and font base, can I do it in nextjs 13? Please give me solution. Thank you