Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)
HTML-код
- Опубликовано: 2 окт 2024
- Learn how to use the new & improved font optimization in Next.js 13, for both local and remote fonts from Google. @next/font automatically self-hosts your font files (for better privacy) and reduces layout shift by automatically generating a fallback font. It's pretty neat!
Learn more: nextjs.org/doc...
#nextjs #react
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.
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 (
//
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
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 (
//
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 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
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.
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
Is there any estimate when the new app directory will become stable and the default?
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?
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
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
Would be amazing with a video on how to do background images with Tailwind and the new Next/Image component🙏
^ THIS 🙏🙏🙏
🎉🎉🎉
Yes please! Has anyone had luck with this? My fonts loaded but all of my global styles broke!
@@amandakoster I tried it a few times and its still very buggy although they claim its stable. Just download the font into your project and use it from there is proving the best way till now.
well explained ! awesome feature!!
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?
❤❤
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.
Simple and to the point. Thanks!
NextJs team is a beast
my english is not the best but i could understand your explanation, really thanks
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.
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, this looks amazing. I hate seeing the CLS from font fallbacks on sites. Now I want to upgrade to Next 13 just for this!
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?
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! was having issues with mobile safair but this fixed
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, you helped a lot
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
Very confusing. For those who already understands css variables, variable fonts, how to setup tailwind appropriately... things makes sense. But for who is trying to understand how to use it, this is just very very confusing.
I'm facing issue Failed to fetch `Roboto` from Google Fonts.
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
what about more than 1 font
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?
WARNING: This method is now marked as Vercel as DEPRECATED!! And won't work when deployed on Vercel.
Should've shown how to set it up with Styled Components, so far there's nothing anywhere showing how to do this with Styled Components and a little bit more about local fonts with woff2, woff, ttf, it got a bit confusing... But thanks anyway
nextjs is probably the worst framework in the world
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 come your Head tag laying in div and inside the body? think before next or react for that metter devs must go through basics other way we have what we have here
would've loved it a 110% if I could set the font from css haha
@next/font is already dead. long live next/font . The docs should probably stop pointing to this video as well
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!
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. i felt like an absolute dummy trying to do this reading from the nextjs docs
What if the font is hosted in some other CDN? Anyway to import them without downloading it?
Thanks a lot! This was much-needed
What is this theme?
How can I set next/font using stitches styling package?
Thank you Lee for in depth explanation!
Hey. I gave it a shot. doesn't throw an error. Also didn't show up on the website :/ lost…
Nice, is SvelteKit support possible/planned?
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?
if not specify a subset it will use all of them? or there's a default? and same question for the weights
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.
How do I connect a second font?
How can i give multiple fonts ?
What font are you using in vscode? is it Fira code?
It's just the default!
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 👍
Wow, thanks this video, Lee! So helpful.
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 alot!
anyway to fix inside another ?i'd like to not create a waste tag
👍thanks Lee!
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
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!
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 ?
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
where the
local font ???
This doesn't work for me. AppProps throws errors for me both on line 2 and line 10.
If this was that easy, I wouldn't be here trying to understand why all those "magical" methods doesn't work.
I'm use two fonts. We do need pass in file app and a tag main? This is a little strange.
Where is the localFont part? 💀
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
the goat has spoken
would you mind changing your vs code theme... its too dull... Henna color theme is pretty good tho
Do the same but my roboto font doesn't apply, even though the className is applied.
What about multiple local fonts with tailwind?
I understand nothing😅
Nice video bro, I wonder if this good practices helps with Headers original paths to configure in advanced next.config.js. Thank's
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.
how can i add multiple font globally? adding multiple classnames? it is not working
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?
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?
what if I wanted to use 3 different fonts for my website ??
Jesus christ, nice link nextjs docs! One stupid question, soooo what i need to do if i have 2 fonts. And i need to use them both at the same time in the same component
it seems that the method with the variable is not very practical, it should help, instead it complicates the code. Let's hope it gets better
How can i set up second font for title by CSS module ? font-family:"inter" doesnot work
It looks like it changed with the the new App directory structure that's replacing Pages
creating tailwind variable is not working. I try to use font in any child component with out setting globally, it does not work
Hi, awesome tutorial. Please what's the name of this vscode editor theme? Thanks
Amazing...
If you're using local font file does next still know how to pair it with a suitable fallback?
Yes!
@@leerob magic!!
This gives the error 💣 Error: Cannot find module '@next/font/google' on next build 💣
i landed here from official next js documentaion. btw i already watched it and again i am here.
hi thank you for how to video.
I want to ask. Why didn't they put the next/font install code in the documentation?
But it cannot work in CDN assets. Only local assets work
Thanks for explaining the tailwind css bit
Does RTK still makes sense with NextJS 13 app directory? or any state management you suggest to be use?
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!
Damn it! Everyone uses typescript except me. Frustrating.
How can we get it to work in plain CSS or SCSS/SASS?