How to load and use fonts?
Unanswered
Sun bear posted this in #help-forum
Sun bearOP
Hi,
I'm trying to load and use custom downloaded fonts in my next.js project.
I followed the documentation attached in the image and have added 2 such files for my font.
But according to the code, the first font is being applied to the whole project.
I want to know how I can use specific fonts for specific elements only, instead of just applying it to the
Thanks!
I'm trying to load and use custom downloaded fonts in my next.js project.
I followed the documentation attached in the image and have added 2 such files for my font.
But according to the code, the first font is being applied to the whole project.
I want to know how I can use specific fonts for specific elements only, instead of just applying it to the
<main> tag.Thanks!
4 Replies
apply
className={myFont.className} to the element you like, <main> is just an example@D Trombett apply `className={myFont.className}` to the element you like, `<main>` is just an example
Sun bearOP
is there a way to use it across all files inside
pages folder, i believe its bad practice to keep re-importing myFont for all my pagesIt is not. If you need the same font for all the app you can add in the top element, otherwise use it in the elements you need
@Sun bear Hi,
I'm trying to load and use custom downloaded fonts in my next.js project.
I followed the documentation attached in the image and have added 2 such files for my font.
But according to the code, the first font is being applied to the whole project.
I want to know how I can use specific fonts for specific elements only, instead of just applying it to the `<main>` tag.
Thanks!
Use css variables. Guide for google fonts here https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css, local font is similar.
Then when you need to use the font, simply do
Then when you need to use the font, simply do
.element {
font-family: var(--font-variable-name);
}