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

[@ahmedqwbad2802]

thank you!

[@TuomoKankaanpaa]

Cheers!

[@kurzldwkok]

why im still getting fouc style when refresh page?

[@xlencecohort3.0]

thank you so much, and there's chatGPT still suggesting to import url() method

[@TuomoKankaanpaa]

Glad it helped!

[@stevenlim7807]

hi! This video is great! is there a way for me to see which google fonts are available through nextjs vs. which ones I would need to download and import myself?

[@TuomoKankaanpaa]

Glad you liked it! I am afraid there isn't a comprehensive list of the fonts that are supported. So what I would recommend doing at the moment is just browsing google fonts site and when you find a font you like, try importing it from next/font/google and see if it works. I know this isn't ideal way but that's the best way I know so far.

[@WaseemRajaShaik-y5y]

Why not use localfont from public folder

[@lycan2494]

how to use the different font weights???? like font -[fontName]-weight. doesn't work for me

[@TuomoKankaanpaa]

Are you using variable fonts?

[@alexdin1565]

please can you make videos about payload cms with nextjs?

[@TuomoKankaanpaa]

Im planning for creating content around nextjs and some headless cms! Any specific topics / tutorials regarding those that you’d like to see?

[@afzalnomani7561]

What if font is hosted somewhere else e.g s3, cloud front

[@TuomoKankaanpaa]

It shouldnt be a problem, the fonts are downloaded in build time!