How to add custom font in nextjs 13 app dir doesn't seems to work
Answered
Cape lion posted this in #help-forum
Cape lionOP
import { Navbar } from '@/components'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import LocalFont from 'next/font/local'
const local = LocalFont({
src : "../../public/fonts/IMPACT.TTF",
variable : "--impact",
})
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={local.className}>
<Navbar />
{children}
</body>
</html>
)
}
Answered by Clown
html {
font-family: var(--font-inter);
}
h1 {
font-family: var(--font-roboto-mono);
}
70 Replies
Cape lionOP
@Cape lion Click to see attachment
Is the font inside your public folder?
Cape lionOP
yes
Also that font name seems weird. I dont think it should be all uppercase?
Cape lionOP
here is vs code ss
Cape lionOP
tried already doesn't work
https://prismic.io/blog/nextjs-fonts this doesn't help either
mean?
sus??
Download from some other site
Maybe its a problem with the site
Or did you rename the file yourself?
Cape lionOP
actully its provided by client
maybe designer shared it don't know
Can you open the font file ?
It should show that install screen which displays the font
Cape lionOP
@Clown It should show that install screen which displays the font
Cape lionOP
yup it do
Also since you already know the name, you can just use the internet to download it
Cape lionOP
let me try it
works lol
yes the guy actually renamed it
Cape lionOP
@Clown hey do you know how can these three fonts as 1 2 3 an example of page dir
import '@/styles/globals.css';
import localFont from '@next/font/local';
const ImpactFont = localFont({
src: '../public/fonts/Impact.ttf',
variable: '--Impact',
});
const GoodTimeRGFont = localFont({
src: '../public/fonts/GoodTimeRG.ttf',
variable: '--GoodTimeRG',
});
const RechargeBDFont = localFont({
src: '../public/fonts/RechargeBD.ttf',
variable: '--RechargeBD',
});
export default function App({ Component, pageProps }) {
return (
<main className={`${ImpactFont.variable} ${GoodTimeRGFont.variable} ${RechargeBDFont.variable}`}>
<Component {...pageProps} />
</main>
);
}
Cape lionOP
look I want to add Impact as main and other as alternatives like example iin code
You can just use the variables directly in the css files
With var()
html {
font-family: var(--font-inter);
}
h1 {
font-family: var(--font-roboto-mono);
}
Answer
Cape lionOP
understood will try this
From the docs ^
Cape lionOP
Thanks alot buddy
@Cape lion Click to see attachment
Cane di Oropa
I am having this same issue. ðŸ˜ðŸ˜
Cape lionOP
Whats up?
My issues was solved
What issue you are facing?
Cane di Oropa
unexpected file
Cape lionOP
Place your font file in app dir
2ndly make sure to keep your file name same as you downloaded it
And its simple
2ndly make sure to keep your file name same as you downloaded it
And its simple
@Cane di Oropa I am having this same issue. ðŸ˜ðŸ˜
If the accepted answer doesnt solve your issue, open up another #help-forum with the questions and any code that may be necessary
@Cape lion Place your font file in app dir
2ndly make sure to keep your file name same as you downloaded it
And its simple
Cane di Oropa
Alright lemme try again, I renamed for my other app and didn’t have any issue though.
Cape lionOP
Look impact.tff
Ttf*
Layout.ts
Thats it !
@Cape lion Layout.ts
Cane di Oropa
It doesn’t work. ðŸ˜
Does that even work in production?
@Clown Does that even work in production?
Cape lionOP
Its does work
You should be putting fonts and stuff in public/ folder
@Cane di Oropa I am having this same issue. ðŸ˜ðŸ˜
ohh i thought it was solved ;( edit: diferent person
@Cane di Oropa It doesn’t work. ðŸ˜
Open up a new thread
@Cane di Oropa It doesn’t work. ðŸ˜
Cape lionOP
Can you show what you are doing ?
@Clown You should be putting fonts and stuff in public/ folder
Cape lionOP
Yes i tried that when i was facing such issue
But if you place in public / fonts folder and give a relatively path it work for development server but fails in production
If you use absolute path doesn't work on each either
So the only solution works for me was to place it in app directory
But if you place in public / fonts folder and give a relatively path it work for development server but fails in production
If you use absolute path doesn't work on each either
So the only solution works for me was to place it in app directory
@risky *ohh i thought it was solved ;(* edit: diferent person
Cape lionOP
Actually solved for me lol
@Cape lion Yes i tried that when i was facing such issue
But if you place in public / fonts folder and give a relatively path it work for development server but fails in production
If you use absolute path doesn't work on each either
So the only solution works for me was to place it in app directory
weird. Placing impact.ttf inside public folder should mean you only have to do "/impact.ttf"
@Clown weird. Placing impact.ttf inside public folder should mean you only have to do "/impact.ttf"
Cape lionOP
Yup doesn't work 🙂 btw programming is weird itself
can you now make new thread
@risky *can you now make new thread*
Cape lionOP
@Cane di Oropa
Cane di Oropa
I have solved it bro thank you.
Been on this for days, it worked for my other apps but didn’t work for one specifically.
I used .tff instead of .ttf. 😂ðŸ˜
Been on this for days, it worked for my other apps but didn’t work for one specifically.
I used .tff instead of .ttf. 😂ðŸ˜
Noice, consider closing the issue with the message that solved your problem
@dumbboy Noice, consider closing the issue with the message that solved your problem
Its already a closed issue lol.
@Clown Its already a closed issue lol.
Oh, I don't scroll to top 

@Cape lion Perfect!
Cane di Oropa
Yoo, I am in your dm. 👋ðŸ¾
Entlebucher Mountain Dog
@Clown how to conditionally change fonts ?
i was trying like this way but not working
i was trying like this way but not working