Issue with using multiple local fonts (with Nextjs+tailwind)
Answered
Gharial posted this in #help-forum
GharialOP
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
@Gharial 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 onGharialOP
now its working
but all my fonts are now agrandir, even though i have used "font-agrandir" in just 1 section of a componenet
GharialOP
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.
@Gharial 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
GharialOP
in netwroks tab?
@B33fb0n3 I guess you set it for all of your texts: (see attached)
GharialOP
I removed it from here. Then i used "font-agrandir", but nothing happened. And i dont see it in networks tab as well :/
@Gharial 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
i dont get it
@Gharial `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
GharialOP
so...whatever we put in "sans" is our default font?
yea you can say it like that
GharialOP
I am importing local fonts like this
yea, now add variables (green arrow)
GharialOP
for each agrandir files?
one for agrandir one for ...
GharialOP
i thought we can add them as variables only when we are using variable font
that are two different things iirc
GharialOP
umm..now i am more confused about the fonts
--your-wonderful-font is a CSS variableGharialOP
correct?
lgtm
GharialOP
but now...
i need to
use
${agrandir.variable} instead of ${agrandir.className}correct?
GharialOP
and used font-agrandir in component
nothing happened
hey wait
i did this in tailwindconfig:
it works
agrandir: ["var(--font-agrandir)"],it works
yes
@Gharial and used font-agrandir in component
GharialOP
i think here, i had to use font-sans
just to get this right: is your issue solved like that? 🤔
@Gharial
@Gharial
@Gharial so...whatever we put in "sans" is our default font?
GharialOP
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>
GharialOP
yes, seems to be working right
happy to help
GharialOP
thnx for ur time
❤️