Issue with using multiple local fonts (with Nextjs+tailwind)
Answered
Dwarf Crocodile posted this in #help-forum
Dwarf CrocodileOP
i have multiple font weight files (thin, bold, regular, etc..), how can i use them? can i put value of
I was doing like this right now:
layout.js
tailwind.config:
in component:
But its not working
weight and style to be anything in this case?I was doing like this right now:
layout.js
const agrandir = localFont({
src: [
{
path: "./fonts/Agrandir-ThinItalic.otf",
weight: "400",
style: "thin",
},
{
path: "./fonts/Agrandir-Regular.otf",
weight: "400",
style: "normal",
},
{
path: "./fonts/Agrandir-TextBold.otf",
weight: "400",
style: "bold",
},
{
path: "./fonts/Agrandir-GrandHeavy.otf",
weight: "400",
style: "heavy",
},
],
});
.
.
.
<body className={`${geistSans.variable} ${geistMono.variable} ${agrandir.className} antialiased`}> {children}
</body>tailwind.config:
fontFamily: {
agrandir: ["Agrandir", "sans-serif"],
},in component:
<h1 className="text-[14vw] leading-[0.8] mt-10 md:ml-12 font-agrandir">
about the founders
</h1>But its not working
Answered by B33fb0n3
then put it back there and replace your common font (that is mostly used on your page) with font sans (default font). Then the default should look right. Then load the other fonts into it's own css variable and apply the other css variables to your tailwind config as well. After that you can use them and they should also be loaded
--- Edit
Tutorial for that: https://nextjs-forum.com/post/1327009389030150225#message-1327757883072577546
--- Edit
Tutorial for that: https://nextjs-forum.com/post/1327009389030150225#message-1327757883072577546
48 Replies
@Dwarf Crocodile i have multiple font weight files (thin, bold, regular, etc..), how can i use them? can i put value of `weight` and `style` to be anything in this case?
I was doing like this right now:
layout.js
const agrandir = localFont({
src: [
{
path: "./fonts/Agrandir-ThinItalic.otf",
weight: "400",
style: "thin",
},
{
path: "./fonts/Agrandir-Regular.otf",
weight: "400",
style: "normal",
},
{
path: "./fonts/Agrandir-TextBold.otf",
weight: "400",
style: "bold",
},
{
path: "./fonts/Agrandir-GrandHeavy.otf",
weight: "400",
style: "heavy",
},
],
});
.
.
.
<body className={`${geistSans.variable} ${geistMono.variable} ${agrandir.className} antialiased`}> {children}
</body>
tailwind.config:
fontFamily: {
agrandir: ["Agrandir", "sans-serif"],
},
in component:
<h1 className="text-[14vw] leading-[0.8] mt-10 md:ml-12 font-agrandir">
about the founders
</h1>
But its not working
you might want to also change your weight property. For thin it should be lower than 400. Normal is 400. Bold is over 400 and so on. Also make sure you change the style to the correct styles.
Agrandir-ThinItalic sounds like it's thin (so weight under 400) and italic so the style must be italic. Google a bit around to find out which font weight matches which word and which word matches which style and so onDwarf CrocodileOP
now its working
but all my fonts are now agrandir, even though i have used "font-agrandir" in just 1 section of a componenet
Dwarf CrocodileOP
if i remove it, will i be able to use it in my components?
i think i tried removing it from there yesterday, and i wasn't able to use the font using "font-agrandir".
if u think this is the only reason, i will try removing it again.
@Dwarf Crocodile if i remove it, will i be able to use it in my components?
check if the font is then still downloaded after you removed it
Dwarf CrocodileOP
in netwroks tab?
@B33fb0n3 I guess you set it for all of your texts: (see attached)
Dwarf CrocodileOP
I removed it from here. Then i used "font-agrandir", but nothing happened. And i dont see it in networks tab as well :/
@Dwarf Crocodile I removed it from here. Then i used "font-agrandir", but nothing happened. And i dont see it in networks tab as well :/
then put it back there and replace your common font (that is mostly used on your page) with font sans (default font). Then the default should look right. Then load the other fonts into it's own css variable and apply the other css variables to your tailwind config as well. After that you can use them and they should also be loaded
--- Edit
Tutorial for that: https://nextjs-forum.com/post/1327009389030150225#message-1327757883072577546
--- Edit
Tutorial for that: https://nextjs-forum.com/post/1327009389030150225#message-1327757883072577546
Answer
@B33fb0n3 then put it back there and replace your common font (that is mostly used on your page) with font sans (default font). Then the default should look right. Then load the other fonts into it's own css variable and apply the other css variables to your tailwind config as well. After that you can use them and they should also be loaded
--- Edit
Tutorial for that: https://discord.com/channels/752553802359505017/1327009389030150225/1327757883072577546
Dwarf CrocodileOP
replace your common font with font sans?i dont get it
@Dwarf Crocodile `replace your common font with font sans?`
Do this: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css
Green arrow: define as variable.
Red arrow: set it as default font sans
Green arrow: define as variable.
Red arrow: set it as default font sans
Dwarf CrocodileOP
so...whatever we put in "sans" is our default font?
yea you can say it like that
Dwarf CrocodileOP
I am importing local fonts like this
yea, now add variables (green arrow)
Dwarf CrocodileOP
for each agrandir files?
one for agrandir one for ...
Dwarf CrocodileOP
i thought we can add them as variables only when we are using variable font
that are two different things iirc
Dwarf CrocodileOP
umm..now i am more confused about the fonts
--your-wonderful-font is a CSS variableDwarf CrocodileOP
correct?
lgtm
Dwarf CrocodileOP
but now...
i need to
use
${agrandir.variable} instead of ${agrandir.className}correct?
Dwarf CrocodileOP
and used font-agrandir in component
nothing happened
hey wait
i did this in tailwindconfig:
it works
agrandir: ["var(--font-agrandir)"],it works
yes
@Dwarf Crocodile and used font-agrandir in component
Dwarf CrocodileOP
i think here, i had to use font-sans
just to get this right: is your issue solved like that? 🤔
@Dwarf Crocodile
@Dwarf Crocodile
@Dwarf Crocodile so...whatever we put in "sans" is our default font?
Dwarf CrocodileOP
so this is not true
not a default font
just assigned a name to this variable, which we can use later
@B33fb0n3 just to get this right: is your issue solved like that? 🤔
<@892052908428902441>
Dwarf CrocodileOP
yes, seems to be working right
happy to help
Dwarf CrocodileOP
thnx for ur time
❤️