Next.js Discord

Discord Forum

How to add custom font in nextjs 13 app dir doesn't seems to work

Answered
Cape lion posted this in #help-forum
Open in Discord
Avatar
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);
}
View full answer

70 Replies

Avatar
Cape lionOP
Image
Avatar
Clown
Is the font inside your public folder?
Avatar
Cape lionOP
yes
Avatar
Clown
Also that font name seems weird. I dont think it should be all uppercase?
Avatar
Cape lionOP
Image
Image
here is vs code ss
Avatar
Clown
Ohhh
Wait
You need to do ./fonts/IMPACT.TTF
Avatar
Cape lionOP
tried already doesn't work
Image
https://prismic.io/blog/nextjs-fonts this doesn't help either
mean?
sus??
Avatar
Clown
Download from some other site
Maybe its a problem with the site
Or did you rename the file yourself?
Avatar
Cape lionOP
actully its provided by client
maybe designer shared it don't know
Avatar
Clown
Can you open the font file ?
It should show that install screen which displays the font
Avatar
Cape lionOP
Image
yup it do
Avatar
Clown
Also since you already know the name, you can just use the internet to download it
Avatar
Cape lionOP
Image
let me try it
works lol
yes the guy actually renamed it
Avatar
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>
  );
}
Avatar
Clown
What do you mean?
Avatar
Cape lionOP
look I want to add Impact as main and other as alternatives like example iin code
Avatar
Clown
You can just use the variables directly in the css files
With var()
Avatar
Clown
html {
  font-family: var(--font-inter);
}
 
h1 {
  font-family: var(--font-roboto-mono);
}
Answer
Avatar
Cape lionOP
understood will try this
Avatar
Clown
From the docs ^
Avatar
Cape lionOP
Thanks alot buddy
Avatar
Cane di Oropa
I am having this same issue. 😭😭
Avatar
Cape lionOP
Whats up?
My issues was solved
What issue you are facing?
Avatar
Cane di Oropa
unexpected file
Avatar
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
Avatar
Clown
If the accepted answer doesnt solve your issue, open up another #help-forum with the questions and any code that may be necessary
Avatar
Cane di Oropa
Alright lemme try again, I renamed for my other app and didn’t have any issue though.
Avatar
Cape lionOP
Look impact.tff
Image
Ttf*
Layout.ts
Image
Thats it !
Avatar
Cane di Oropa
It doesn’t work. 😭
Avatar
Clown
Does that even work in production?
Avatar
Cape lionOP
Its does work
Avatar
Clown
You should be putting fonts and stuff in public/ folder
Avatar
Risky
ohh i thought it was solved ;( edit: diferent person
Avatar
Clown
Open up a new thread
Avatar
Cape lionOP
Can you show what you are doing ?
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
Actually solved for me lol
Avatar
Clown
weird. Placing impact.ttf inside public folder should mean you only have to do "/impact.ttf"
Avatar
Cape lionOP
Yup doesn't work 🙂 btw programming is weird itself
Avatar
Risky
can you now make new thread
Avatar
Cape lionOP
@Cane di Oropa
Avatar
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. 😂😭
Avatar
dumbboy
Noice, consider closing the issue with the message that solved your problem
Avatar
Cape lionOP
Perfect!
Avatar
Clown
Its already a closed issue lol.
Avatar
dumbboy
Oh, I don't scroll to top :derp:
Avatar
Cane di Oropa
Yoo, I am in your dm. 👋🏾
Avatar
Entlebucher Mountain Dog
@Clown how to conditionally change fonts ?
i was trying like this way but not working
Image
Avatar
Clown
Create a new #help-forum post