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

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!

On the OFFICIAL DOCS they point to this, then: *Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead.*. Please update the docs or pin an updated comment here.

Thanks Lee for putting out these high value-per-square-minute videos. Getting to watch in-depth explanations of new and experimental features early makes me feel part of the Next.js community. Random question, can `@next/font/local` be used in combination with `turbo`?

Thank you Lee for in depth explanation!

I love your channel. Ended up so many times back here!

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?

Wow, thanks this video, Lee! So helpful.

Thanks Lee, another reason to love Next.js!

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.

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

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?

Thanks for detailed explanation Lee Rob ❤️

Love your work man, keep it up :)

Simple and to the point. Thanks!

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

Awesome video! Helped a lot, Thank you!

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

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?

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

well explained ! awesome feature!!

Thank you, this was really helpful.

Thanks for this Lee!

Awesome video, thanks for the upload

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.

Awesome, keep it up. We need more tutorials like this for other features. If my app uses variable font, but only specific weights (400, 500), is there totally no need to specify them? For when variable fonts are unsupported for some reason

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

After looking through the docs, it looks like Arial and Times New Roman are the only fallback options? Courier for monospace would be nice as well.

Great Lee thanks for the video 👏👏

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 :)

Does RTK still makes sense with NextJS 13 app directory? or any state management you suggest to be use?

Great video! Thank you

Thanks, you helped a lot

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

For someone who just started learning next: I don't get what exactly is considered being simple here, or what the real advantage is?! Classic local hosting of the the fonts is easy, and specifying a base font in the CSS (especially with a CSS framework like tailwind or bootstrap) is way more convenient than this orgy. What am I missing?

Lets say only certain components need this font, how would you reference the font family from within those components? Lets say you are using sass, index.module.scss. The font-family name generated seems to include some numbers so I'm not sure how to use it from certain components

thanks! was having issues with mobile safair but this fixed

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

hi thank you for how to video. I want to ask. Why didn't they put the next/font install code in the documentation?

Hi, helpful video, but I still have a problem, when I declare everything in my "layout.tsx" I cant use in another pages so I need to redeclare again, thats correct?

Thanks for the explanation. What if instead of using tailwind I want to use sass?

Thank you Lee!

Isn't self-hosting bad for performance? Pretty much if we use @next/font we have to deploy on Vercel to get that CDN performance?

Hi Lee, thanks for that video! Is there a way to use internationalization / i18n with the new app folder?

If this is for nextjs 13, why set this inside _app.tsx file? Shouldn't it be under layout.jsx at the top level inside the app folder? It is not working if I do that btw, resorts to using default font thus asking. Thanks.

What is the best way to inject multiple fonts? Should I concatenate the fonts with the classNames library, or inject them as individual jsx global styles?

Hello, what color theme/scheme are you using in your code editor?

if not specify a subset it will use all of them? or there's a default? and same question for the weights

How do you go about creating your own fonts using localFont? Say I was creating a designsystem and wanted to support NextJS by creating my own font using localFont and the exporting that as an npm-package the rest of my company could install and use just like the Inter function you get from `next/font/google`. E.g: `import { CompanyFont } from "@company/font"`. Is this possible?

Thanks, but Can I import font from other source except google and local some such as some CDN site ?

Is there a way to inject css vairable to html body? Because all popups, like dialogs, callouts need to be rendered on the body, which is beyond the pages custom app's control

thank you so much for this

Nice, is SvelteKit support possible/planned?

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

this is exactly that i was looking for !! thank you a lot !

NextJs team is a beast

Is there a way to install just `next/font/local`? I am planning on just using my woff2 file and don't need to install all of the Google fonts.

Amazing... If you're using local font file does next still know how to pair it with a suitable fallback?

my english is not the best but i could understand your explanation, really thanks

Would be amazing with a video on how to do background images with Tailwind and the new Next/Image component🙏

I just noticed one thing with this after applying next font changes : on local I do not see any css request going for fetching fonts but on production, a request is made with this path "/_next/static/css/694ccb28f5d8ec18.css" which fetches my woff2 fonts. Anyone has idea on why on prod this happens?

Hi, I want to use @next/font but In my case font family name will come from api side or external data. How can I do that with new font lib. I try dynamic loading font package. But it doesn't work. Please help!

I want to use alternative font format in localFont in my next js app. I mean like what we do in @font-face in css that if browser doesn't support first one goes to next one. There is no example for this case In next js document and I don't know how can I do it.Can you help me?

Thanks for the video! I am using nextjs 13 (+ tailwind + react + typescript) and though my fonts loaded but all of my globals broke. there

Thanks for the video

Don't know if it's gonna work but Ill try it on my next js 12 project. Can upgrade yet. AWS amplify does support 13 yet

What a framework; this makes things so simple. Thank you!

Hi, awesome tutorial. Please what's the name of this vscode editor theme? Thanks

does anyone know why all the fonts from the next 13 look fuzzy? Particularly the top part of the character. when I use Google's one by it looks perfect though...

How can i set up second font for title by CSS module ? font-family:"inter" doesnot work

How would you go about a scenario where you're using multiple local fonts? How to pass and use multiple fonts in the child components as required?

i still see a network request for the inter fonts better to download them locally?

What if the font is hosted in some other CDN? Anyway to import them without downloading it?

I'm use two fonts. We do need pass in file app and a tag main? This is a little strange.

This is awesome

I was meesing my head around why my font was serif. Then I saw this quick additions of "font-sans" after the curly brackets :P

If I have multiple local font (different weights), do I need to declare each .woff2 file per weight?

Is there a way to add it globally without adding an additional element in _app.js?

Nice video bro, I wonder if this good practices helps with Headers original paths to configure in advanced next.config.js. Thank's

Thanks alot!

May i know where u got ur hoodie from? Looks sick 🔥

creating tailwind variable is not working. I try to use font in any child component with out setting globally, it does not work

I'm facing issue Failed to fetch `Roboto` from Google Fonts.

How can we get it to work in plain CSS or SCSS/SASS?

👍thanks Lee!

Hi Lee, Great content, thanks. I use mui (previously material-ui) and with that this does not seem to work. It looked very promising, and I hope I am not applying it correctly. If you (or anyone reading) knows how to combine this with mui, it would be great to get some links to content. Mui references working with ThemeProvider, but then I think I am back to square one with getting my google font differently. Thanks,

anyway to fix inside another ?i'd like to not create a waste tag

Can you load multiple fonts with @next/font?

Hi how i can call the particular variant in any tag if i have added multiple variants inside the src like below const proxima = localFont ({ src: [ { path: '../fonts/ProximaNova-Regular.woff2', weight: '400', style: 'normal', }, { path: '../fonts/ProximaNova-Medium.woff2', weight: '500', style: 'normal', }, { path: '../fonts/ProximaNova-Semibold.woff2', weight: '400', style: 'normal', }, { path: '../fonts/ProximaNova-Bold.woff2', weight: '400', style: 'normal', }, ] })

How do we assign specific fonts to specific elements, say.. font-1 assigned to h1, h3 && font-2 assigned to h2 && font-3 assigned to body? TIA

Do the same but my roboto font doesn't apply, even though the className is applied.

What font are you using in vscode? is it Fira code?

@next/font/local Font loader error: Cannot read properties of undefined (reading 'fs') Why is this????

What about multiple local fonts with tailwind?

cool! but isnt CDN faster than hosting the font files in our servers?

How do I connect a second font?

how can i add multiple font globally? adding multiple classnames? it is not working

It looks like it changed with the the new App directory structure that's replacing Pages

what if I wanted to use 3 different fonts for my website ??

What is this theme?

What if I have multiple local font with different font style and different weight ? My font css: @font-face { font-family: "droid-serif"; font-display: auto; font-style: normal; font-weight: 400; font-stretch: normal; src: url(/fonts/DroidSerif.woff2) format("woff2"); } @font-face { font-family: "droid-serif"; font-display: auto; font-style: normal; font-weight: 700; font-stretch: normal; src: url(/fonts/DroidSerif-Bold.woff2) format("woff2"); } @font-face { font-family: "droid-serif"; font-display: auto; font-style: italic; font-weight: 400; font-stretch: normal; src: url(/fonts/DroidSerif-Italic.woff2) format("woff2"); } @font-face { font-family: "droid-serif"; font-display: auto; font-style: italic; font-weight: 700; font-stretch: normal; src: url(/fonts/DroidSerif-BoldItalic.woff2) format("woff2"); }