Problem with Font in NEXTJS project
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
I have a problem in my project where the font i use in my nextjs project (The font is Gantari from google fonts). it only appears in developement, but in production it doesn't show up, keep in mind i deploy this on vercel.
Answered by B33fb0n3
hmm lgtm. Can you create a repro or directly share a github project? A repro can directly be created here as well: https://codesandbox.io/
Like that we can have a deeper look into your issue and test things out. So we can resolve your error while you doing nothing ^^
Like that we can have a deeper look into your issue and test things out. So we can resolve your error while you doing nothing ^^
40 Replies
@Sloth bear I have a problem in my project where the font i use in my nextjs project (The font is Gantari from google fonts). it only appears in developement, but in production it doesn't show up, keep in mind i deploy this on vercel.
take a look at your production website and then inside the network tab. Will the font be downloaded?
Sloth bearOP
No unfortunately it is not downloaded. i dont know why
import type { Metadata } from "next";
import { Gantari } from "next/font/google";
import { cn } from "@/lib/utils";
import { SessionProvider } from "next-auth/react";
import { Analytics } from "@vercel/analytics/next";
const fontSans = Gantari({
subsets: ["latin"],
variable: "--font-sans",
display: "swap",
});
export const metadata: Metadata = {
title: "Alephnull",
description: "My startup",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
fontSans.className
)}
>
<SessionProvider>
{children}
<Analytics />
</SessionProvider>
</body>
</html>
);
}here is my code
Giant panda
you may need to rename your variable from font-sans, this might boil down to a conflict with the exisiting tailwind utility class
@Sloth bear ts
import type { Metadata } from "next";
import { Gantari } from "next/font/google";
import { cn } from "@/lib/utils";
import { SessionProvider } from "next-auth/react";
import { Analytics } from "@vercel/analytics/next";
const fontSans = Gantari({
subsets: ["latin"],
variable: "--font-sans",
display: "swap",
});
export const metadata: Metadata = {
title: "Alephnull",
description: "My startup",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
fontSans.className
)}
>
<SessionProvider>
{children}
<Analytics />
</SessionProvider>
</body>
</html>
);
}
hmm lgtm. Can you create a repro or directly share a github project? A repro can directly be created here as well: https://codesandbox.io/
Like that we can have a deeper look into your issue and test things out. So we can resolve your error while you doing nothing ^^
Like that we can have a deeper look into your issue and test things out. So we can resolve your error while you doing nothing ^^
Answer
Thrianta
Ive never seen display swap used before possible cause there?
Thrianta
Check on your source code on vercel and see if the font file is actually present
@Thrianta Check on your source code on vercel and see if the font file is actually present
how to see the build files on vercel?
Thrianta
Go to your current deployment and on the tab bar look for source
@Thrianta Click to see attachment
Ah yea, that’s my source code. I mean where to find it inside the build folder?
Thrianta
Thats code from one of my projects but just showing the basic stuff this is on vercel
are you also having the asme issue as OP
@Thrianta are you also having the asme issue as OP
I am trying to find the font inside the build folder to verify your idea
Thrianta
i see, I a not sure on this myself and cant build any projects i fried my machine the other day waiting on new parts =/
@Thrianta i see, I a not sure on this myself and cant build any projects i fried my machine the other day waiting on new parts =/
Where do I find the font file inside the build folder?
@Thrianta?
Thrianta
Sorry I dont know the answer to that one
@Thrianta Sorry I dont know the answer to that one
Correct me if I am wrong: you suggested it here, correct?
https://nextjs-forum.com/post/1309675457385332886#message-1309930096345219163 <---- click
https://nextjs-forum.com/post/1309675457385332886#message-1309930096345219163 <---- click
Thrianta
Oh you mean on vercel, same place as your dev project
I thought you meant when you run a local build sorry
@Thrianta Oh you mean on vercel, same place as your dev project
ohhh maybe I didn't express myself correctly, sorry
how to see the build files on vercel?I cloudn't find it
Thrianta
so if you go to the project
yea
Thrianta
click deployments
yea
Thrianta
yea
Thrianta
yea
Thrianta
Default font location for next 15
@Thrianta Default font location for next 15
what you are showing me is the source code. I am looking for the build files. The source code is for me and for OP as well pretty different. So I am looking for the build files because nextjs should move the files to one location (for all of us the same location). Like that OP can check what you mentioned: "is the font file really present"
Thrianta
Dont know that one you will need to look through your build code
@Thrianta Dont know that one you will need to look through your build code
exactly! Am I asked you: where to find the font file inside the build files?
For me I can of course load my fonts from the public folder and spoiler: the files are not even present in my public folder! And it still works 
Thrianta
how are you importing that into your project?
@Thrianta how are you importing that into your project?
it's not about my project. For that I would open my own thread.
@Sloth bear don't speak to us, but I still think he has the same thoughts...
So I am trying to solve his problem
@Sloth bear don't speak to us, but I still think he has the same thoughts...
So I am trying to solve his problem