Menu
I'm trying to add multiple local fonts to nextjs 13. The documentation says to do the following for a single file.
I tried importing the two files in the following way:
import '@/styles/globals.css';
import localFont from '@next/font/local';
const myFonts = localFont({
src: '../public/Fonts/AnultraSlabRegular.ttf',
variable: '--Anultra-Slab',
});
const myFonts2 = localFont({
src: '../public/Fonts/IntroRegular.ttf',
variable: '--Intro-Regular',
});
export default function App({ Component, pageProps }) {
return (
<main className={'${myFonts2.className} ${myFonts.className}'}>
<Component {...pageProps} />
</main>
);
}
this method did not work when assigning a font-family to specific elements.
Thanks in advance!
560
asked Oct 19 '25 08:10
I had to read the documentation more than once. (Since it is referencing the variable name in the example using Google fonts.) It took me quite some time to only discover adding multiple classes should not be done by using the className (as most examples use) to apply one font like;
// Do not use className for importing multiple local fonts
<body className={`bg-black ${nantes.className} ${spezia.className}`}>
{children}
</body>
But by using the variable name like this;
// use variable for importing multiple fonts which you can use throughout the application
<body className={`bg-black ${nantes.variable} ${spezia.variable}`}>
{children}
</body>
To be complete, this is what I have right now, which works;
layout.tsx
import localFont from '@next/font/local'
const spezia = localFont({
src: '../fonts/FaroVariableWeb.woff2',
variable: '--font-spezia'
})
const nantes = localFont({
src: '../fonts/Nantes_Variable_Upright_Web.woff2',
variable: '--font-nantes'
})
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
{/*
<head /> will contain the components returned by the nearest parent
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />
<body className={`bg-black ${nantes.variable} ${spezia.variable}`}>
{children}
</body>
</html>
)
}
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body {
font-family: var(--font-spezia);
color:blueviolet;
}
h1 {
font-family: var(--font-nantes);
color: aqua;
}
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