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.
Sorry about this! The pains of recording point-in-time videos. Hopefully that error message got you down the right path, but pinning this comment for others. Maybe I can re-record at some point.
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`?
I believe if you start from `npx create-next-app@latest --example with-turbopack` and then add `@next/font/local`, it should work - I haven't verified myself, though. Note this uses Tailwind CSS.
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.
I had to add all fonts to the html tag as below // poppins was with "next/font/google" // rubrik was with "next/font/local" /* NextJS14 - layout.tsx*/ return ( //
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.
Dont apply fonts to whole app at the app page via the main tag, instead, import them as the tutorials shown, and apply them selectively on your choosen elements.
I had to add all fonts to the html tag as below // poppins was with "next/font/google" // rubrik was with "next/font/local" /* NextJS14 - layout.tsx*/ return ( //
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?
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?
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?
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
From the docs: -Call the font loader function in one shared file -Export it as a constant -Import the constant in each file where you would like to use this font I guess React context would also work
Same question here, currently trying to figure out how to handle two local fonts with different weights w/ Tailwind. Familiar with the old way (prior to Next 13) but it's unclear how to do this in Next 13
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.
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?
I have a custom font for my website. Should I upload the font files on a cloud storage with CDN cache and a life-time TTL(loaded by good old CSS) or shall I put the font files in the public folder and use next/font/local?
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
Год назад+2
I am missing explanations on how to use several fonts in styling and how do we add them to tailwind and use them wherever we want.
yah i dont get it. this just seems like a ridiculous, convoluted away to essentially host a google font locally, since this method apparently downloads the font into your project anyway?
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?
Cool, BUT, could you do the demo from 1:32 again, but instead of putting link for font in Home page, put it in _document.jsx, as where it should be. Don't do these 'fake' comparisons. Fon't wont flash on page change if you put it in _document.jsx as it will be downloaded only once and used across the project.
I had to add them all to the html element as below // poppins was with "next/font/google" // rubrik was with "next/font/local" /* NextJS14 - layout.tsx*/ return (
{children}
); /* tailwind.config.ts */ fontFamily: { rubrik: ["var(--font-rubrik)"], poppins: ["var(--font-poppins)"], }, Then I could access them all (without "--font-poppins" is not defined errors) /* global.css */ @tailwind base; @tailwind components; @tailwind utilities; body { @apply font-poppins; } h2 { @apply text-3xl font-rubrik; }
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...
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
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?
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?
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!
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
If you only need 2 weights, it may be worth checking the network tab to see if the variable font isn't bigger than the two fixed weights. I think in most cases, sizewise, variable fonts are worth if you'd use 3+ fixed weights.
All good, I figured it out. Pass all required fonts to the , then in your css, apply these variable names to the required elements via the related css variable you specified, eg; h1 { font-family: var(--font-fontName1), sans-serif; } h2 { font-family: var(--font-fontName2), sans-serif; }, etc. - thanks again for this tutorial, it was uber helpful 👍
it doesnt work that way now, 'next/font' is incorporated on nextjs, so you dont need to isntall, and if you are using tailwind, you must to do at another way, is in nextjs docs. so this video is deprecated..
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', }, ] })
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 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,
Bumped into the same issue. What I did is set the typography.fontFamily prop in the MUI theme to 'unset' (note that you'll need to create a base theme with this settings and then create your theme using the base theme). However it feels like a hack and if there's a proper way to do it I'd be happy to know.
I got the error "cannot find module 'next/dist/compiled/https-proxy-agent'" when installing next/font. Can anyone give me the solution, thanks so much.
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.
Sorry about this! The pains of recording point-in-time videos. Hopefully that error message got you down the right path, but pinning this comment for others. Maybe I can re-record at some point.
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!
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`?
I believe if you start from `npx create-next-app@latest --example with-turbopack` and then add `@next/font/local`, it should work - I haven't verified myself, though. Note this uses Tailwind CSS.
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 :)
yeah, I noticed that! So cool.
nice :)
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.
Load them in without next/font and use your own preload tags
I had to add all fonts to the html tag as below
// poppins was with "next/font/google"
// rubrik was with "next/font/local"
/* NextJS14 - layout.tsx*/
return (
//
Love the pace. You get to the point! Thank you.
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.
Dont apply fonts to whole app at the app page via the main tag, instead, import them as the tutorials shown, and apply them selectively on your choosen elements.
I had to add all fonts to the html tag as below
// poppins was with "next/font/google"
// rubrik was with "next/font/local"
/* NextJS14 - layout.tsx*/
return (
//
Thank you Lee for in depth explanation!
thanks. i felt like an absolute dummy trying to do this reading from the nextjs docs
So how do you add multiple fonts to an app directory? I want to have two different google fonts globally accessible on my site
... and of course, no reply from Lee. It's like these NextJS guys think everyone builds hello world apps....
@@venicebeachsurfer lol
@@venicebeachsurfer
Wow, thanks this video, Lee! So helpful.
Is there any estimate when the new app directory will become stable and the default?
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?
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?
the tailwind part was so hard to find, thanks a lot for the video
Thanks Lee, another reason to love Next.js!
This is neat! It works like a charm right off the bat.
i landed here from official next js documentaion. btw i already watched it and again i am here.
Thanks for explaining the tailwind css bit
Thanks a lot! This was much-needed
Thank you so much, this is a very quality channel!
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?
Have you found a way to do this?
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?
❤❤
Thanks for detailed explanation Lee Rob ❤️
Can you load multiple fonts with @next/font?
I would like to know this too
Same question
Also curious
yes, I am also curious about adding more than one font family
The answer is yes
Starts at 2:29
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
From the docs:
-Call the font loader function in one shared file
-Export it as a constant
-Import the constant in each file where you would like to use this font
I guess React context would also work
my english is not the best but i could understand your explanation, really thanks
Awesome video! Helped a lot, Thank you!
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");
}
Same question here, currently trying to figure out how to handle two local fonts with different weights w/ Tailwind. Familiar with the old way (prior to Next 13) but it's unclear how to do this in Next 13
Love your work man, keep it up :)
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.
I am using nextjs 13 and this video does not offer a complete tutorial. My fonts loaded but all of my globals broke.
@@amandakoster did you fix it?
Thank you, this was really helpful.
I love your channel. Ended up so many times back here!
well explained ! awesome feature!!
Simple and to the point. Thanks!
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?
I have a custom font for my website. Should I upload the font files on a cloud storage with CDN cache and a life-time TTL(loaded by good old CSS) or shall I put the font files in the public folder and use next/font/local?
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
I am missing explanations on how to use several fonts in styling and how do we add them to tailwind and use them wherever we want.
Awesome video, thanks for the upload
how can I update the google font package cause eg for some fonts I have the error "Module '"next/font/google"' has no exported member 'xxx'.ts(2305)"
cool! but isnt CDN faster than hosting the font files in our servers?
yah i dont get it. this just seems like a ridiculous, convoluted away to essentially host a google font locally, since this method apparently downloads the font into your project anyway?
@@notstevelam ill search for a way to import fonts from cdn and using Next fonts as fallback, seems to be the best approach
@@Jack-ss4re hey! got an optimal approach for that?
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
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.
Thanks for this Lee!
thanks! was having issues with mobile safair but this fixed
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?
hi thank you for how to video.
I want to ask. Why didn't they put the next/font install code in the documentation?
if not specify a subset it will use all of them? or there's a default? and same question for the weights
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
Great Lee thanks for the video 👏👏
Cool, BUT, could you do the demo from 1:32 again, but instead of putting link for font in Home page, put it in _document.jsx, as where it should be. Don't do these 'fake' comparisons. Fon't wont flash on page change if you put it in _document.jsx as it will be downloaded only once and used across the project.
It will still flash the first time it loads.
@@davidgildegomezperez4364 True, but MUCH less noticable and much faster
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?
nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts
I had to add them all to the html element as below
// poppins was with "next/font/google"
// rubrik was with "next/font/local"
/* NextJS14 - layout.tsx*/
return (
{children}
);
/* tailwind.config.ts */
fontFamily: {
rubrik: ["var(--font-rubrik)"],
poppins: ["var(--font-poppins)"],
},
Then I could access them all (without "--font-poppins" is not defined errors)
/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply font-poppins;
}
h2 {
@apply text-3xl font-rubrik;
}
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?
I'm facing issue Failed to fetch `Roboto` from Google Fonts.
Does RTK still makes sense with NextJS 13 app directory? or any state management you suggest to be use?
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...
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
I'm use two fonts. We do need pass in file app and a tag main? This is a little strange.
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?
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?
What if the font is hosted in some other CDN? Anyway to import them without downloading it?
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!
Nice, is SvelteKit support possible/planned?
Thanks for the explanation. What if instead of using tailwind I want to use sass?
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
If you only need 2 weights, it may be worth checking the network tab to see if the variable font isn't bigger than the two fixed weights. I think in most cases, sizewise, variable fonts are worth if you'd use 3+ fixed weights.
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.
Hi Lee, thanks for that video!
Is there a way to use internationalization / i18n with the new app folder?
Hey! You can see supported/planned/unplanned features here: beta.nextjs.org/docs/app-directory-roadmap
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
All good, I figured it out. Pass all required fonts to the , then in your css, apply these variable names to the required elements via the related css variable you specified, eg; h1 { font-family: var(--font-fontName1), sans-serif; } h2 { font-family: var(--font-fontName2), sans-serif; }, etc. - thanks again for this tutorial, it was uber helpful 👍
If I have multiple local font (different weights), do I need to declare each .woff2 file per weight?
nextjs.org/docs/app/building-your-application/optimizing/fonts#:~:text=If%20you%20want,be%20an%20array%3A
Hi, awesome tutorial. Please what's the name of this vscode editor theme? Thanks
it doesnt work that way now, 'next/font' is incorporated on nextjs, so you dont need to isntall, and if you are using tailwind, you must to do at another way, is in nextjs docs. so this video is deprecated..
Thanks, but Can I import font from other source except google and local some such as some CDN site ?
NextJs team is a beast
Nice video bro, I wonder if this good practices helps with Headers original paths to configure in advanced next.config.js. Thank's
i still see a network request for the inter fonts better to download them locally?
How can I set next/font using stitches styling package?
Thanks for the video! I am using nextjs 13 (+ tailwind + react + typescript) and though my fonts loaded but all of my globals broke. there
Works fine for google fonts, but getting a Cannot read properties of undefined (reading 'fs') for local fonts!
Would you mind opening an issue on GitHub with a reproduction? Thank you!
How can i set up second font for title by CSS module ? font-family:"inter" doesnot work
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',
},
]
})
export default function App({ Component, pageProps }) {
return (
)
}
suppose i ahve to call it inside main then how i can do this for multiple src's
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?
What font are you using in vscode? is it Fira code?
It's just the default!
May i know where u got ur hoodie from? Looks sick 🔥
It looks like it changed with the the new App directory structure that's replacing Pages
Thanks, you helped a lot
what if I wanted to use 3 different fonts for my website ??
What about the local font how we can use that
you did not mentioned about it
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,
Bumped into the same issue.
What I did is set the typography.fontFamily prop in the MUI theme to 'unset' (note that you'll need to create a base theme with this settings and then create your theme using the base theme).
However it feels like a hack and if there's a proper way to do it I'd be happy to know.
@@nadavbueno Thanks man!
I got the error "cannot find module 'next/dist/compiled/https-proxy-agent'" when installing next/font. Can anyone give me the solution, thanks so much.
Same. Did you figure out a solution?
@@meilyn22 I haven't found a way to solve it yet.
@@CrownHanKen The version of Next.js and @Next/fonts must be the same. That's what solved my issue.
anyway to fix inside another ?i'd like to not create a waste tag
Amazing...
If you're using local font file does next still know how to pair it with a suitable fallback?
Yes!
@@leerob magic!!
How can we get it to work in plain CSS or SCSS/SASS?
@next/font/local
Font loader error:
Cannot read properties of undefined (reading 'fs')
Why is this????
This was fixed in 13.0.4!
What about multiple local fonts with tailwind?
Great video! Thank you
Hey. I gave it a shot. doesn't throw an error. Also didn't show up on the website :/ lost…
How do I connect a second font?
What is this theme?