Menu
I created a new next.js project and added the library of CSS nextui and it seems that I can change the font family on the documentation, but there is no example for this, and Idk what to do and how.
I searched on other platforms and websites and couldn't find anything.
Has anybody had this problem before?
637
asked Dec 03 '25 08:12
I encountered a similar issue with Next.js 14.
To resolve it, I added the following code to the tailwind.config.js file, which successfully applied the desired font family across the entire project.
/** @type {import('tailwindcss').Config} */
const { nextui } = require("@nextui-org/react");
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
important: true,
theme: {
extend: {
fontFamily: {
Peyda: ["Peyda"],
},
},
},
plugins: [
nextui({
themes: {
light: {
layout: {},
colors: {},
},
dark: {
layout: {},
colors: {},
},
},
}),
],
darkMode: "class",
};
And here is my globals.css that I defined font family:
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Peyda";
src: url("/fonts/Peyda/woff2/PeydaWeb-Regular.woff2") format("woff2"),
url("/fonts/Peyda/woff/PeydaWeb-Regular.woff") format("woff"),
url("/fonts/Peyda/eot/PeydaWeb-Regular.eot") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
@apply font-Peyda;
}
This is the way I used to make it works :
global.css :
Import your custom font like that.
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Satoshi";
src:
url("../public/font/Satoshi-Variable.woff2") format("woff2"),
url("../public/font/Satoshi-Variable.woff") format("woff"),
url("../public/font/Satoshi-Variable.ttf") format("truetype");
font-weight: 200 700;
font-display: swap;
font-style: normal;
}
tailwind.config.js :
Add the fontFamily in theme > extend.
import {nextui} from '@nextui-org/theme'
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-sans)"],
mono: ["var(--font-mono)"],
satoshi: ["Satoshi"]
},
},
},
darkMode: "class",
plugins: [nextui()],
}
root layout.tsx :
Finally, you need to add the font family with TailwindCss in the
import "@/styles/globals.css";
import { Metadata, Viewport } from "next";
import { Link } from "@nextui-org/link";
import clsx from "clsx";
import { Providers } from "./providers";
import { siteConfig } from "@/config/site";
import { Navbar } from "@/components/navbar";
import Footer from "@/components/Footer";
export const metadata: Metadata = {
title: {
default: siteConfig.name,
template: `%s - ${siteConfig.name}`,
},
description: siteConfig.description,
icons: {
icon: "/logo.png",
},
};
export const viewport: Viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "white" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
],
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html suppressHydrationWarning lang="en">
<head />
<body
className={clsx(
"min-h-screen bg-background antialiased font-satoshi",
)}
>
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
<div className="relative flex flex-col h-screen">
<Navbar />
<main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
{children}
</main>
<Footer />
</div>
</Providers>
</body>
</html>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With