Not able to render Fonts
Unanswered
Giant Angora posted this in #help-forum
Giant AngoraOP
I am using Tailwind with Next.js 14
What I am doing:
Creating a
The font file:
This is the Tailwind Config file
The fonts are being added to the project but the fonts are not being rendered as I thought they would, why?
What I am doing:
Creating a
font.ts file where I am defining the fonts and then I am introducing them in my layout like thisreturn (
<html lang="en" className={`${ubuntu.variable} ${ibm_plex_mono.variable}`}>
<body className="font-sans">
<Navbar />
<main>{children}</main>
<Footer />
</body>
</html>
);The font file:
import { Ubuntu, IBM_Plex_Mono } from "next/font/google";
export const ubuntu = Ubuntu({
weight: ["300", "400", "500", "700"],
subsets: ["latin"],
display: "swap",
variable: "--font-ubuntu",
});
export const ibm_plex_mono = IBM_Plex_Mono({
weight: ["100", "200", "300", "400", "500", "600", "700"],
subsets: ["latin"],
display: "swap",
variable: "--font-ibm_plex_mono",
});This is the Tailwind Config file
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-ubuntu)"],
mono: ["var(--font-ibm_plex_mono)"],
},
},
},
plugins: [],
};The fonts are being added to the project but the fonts are not being rendered as I thought they would, why?
20 Replies
I had to delete my .next folder and rebuild from scratch to get it to work
Browser dev tools is your friend, see what classes are actually being applied
@Matt I had to delete my .next folder and rebuild from scratch to get it to work
Giant AngoraOP
Did you mean the
.next.config.js file?@Giant Angora Did you mean the `.next.config.js` file?
No lol, dont delete that. He means the
.next folder.eek sorry haha
edited
@Matt edited
Giant AngoraOP
Thanks I am trying that out.
If it may not be a bother, can you look at how I have defined the fonts and how I am using them? and if that is the correct way to do so?
If it may not be a bother, can you look at how I have defined the fonts and how I am using them? and if that is the correct way to do so?
Nvm, that seems good enough, i was the confused one 
You might have to switch the dashes and underscores around in that IBM if your font doesn't work.
@Clown You might have to switch the dashes and underscores around in that IBM **if** your font doesn't work.
Giant AngoraOP
The
ubuntu one should have worked at least@Giant Angora The `ubuntu` one should have worked at least
Could very well be a issue with you trying to use var inside the tailwind config
try setting it manually by using css and see if it works first
@Clown try setting it manually by using css and see if it works first
Giant AngoraOP
Totally works
Tbh, this is really strange
Maybe I am doing something wrong but I had earlier tried to follow the docs as close as possible
In the root
@Matt I didn't do anything in the tailwind config just used the [font].className property
Giant AngoraOP
I am doing the same thing now, I just noticed that my other projects that I worked on are using a
system-ui font even when there is a font prescribed in the layout files@Giant Angora I am doing the same thing now, I just noticed that my other projects that I worked on are using a `system-ui` font even when there is a font prescribed in the layout files
Ig the best way would either be to create a class in your global css and use that in the className OR just go with the other approach which is using "font.className" wherever you need the font instead of using variables