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

2023-09-12T15:14:49.000Z

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

Cape lionOP

2023-09-12T15:16:09.000Z

Clown

2023-09-12T15:19:47.000Z

Is the font inside your public folder?

Cape lionOP

2023-09-12T15:19:58.000Z

yes

Clown

2023-09-12T15:20:12.000Z

Also that font name seems weird. I dont think it should be all uppercase?

Cape lionOP

2023-09-12T15:20:21.000Z

here is vs code ss

Clown

2023-09-12T15:21:38.000Z

Ohhh

Wait

You need to do ./fonts/IMPACT.TTF

Cape lionOP

2023-09-12T15:23:24.000Z

tried already doesn't work

https://prismic.io/blog/nextjs-fonts this doesn't help either

mean?

sus??

Clown

2023-09-12T15:26:58.000Z

Download from some other site

Maybe its a problem with the site

Or did you rename the file yourself?

Cape lionOP

2023-09-12T15:27:43.000Z

actully its provided by client

maybe designer shared it don't know

Clown

2023-09-12T15:28:14.000Z

Can you open the font file ?

It should show that install screen which displays the font

Cape lionOP

2023-09-12T15:28:45.000Z

yup it do

Clown

2023-09-12T15:28:50.000Z

Also since you already know the name, you can just use the internet to download it

Cape lionOP

2023-09-12T15:29:09.000Z

let me try it

works lol

yes the guy actually renamed it

Cape lionOP

2023-09-12T15:42:28.000Z

@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>
  );
}

Clown

2023-09-12T15:44:02.000Z

What do you mean?

Cape lionOP

2023-09-12T15:44:56.000Z

look I want to add Impact as main and other as alternatives like example iin code

Clown

2023-09-12T15:46:05.000Z

You can just use the variables directly in the css files

With var()

Clown

2023-09-12T15:46:51.000Z

html {
  font-family: var(--font-inter);
}
 
h1 {
  font-family: var(--font-roboto-mono);
}

Answer

Cape lionOP

2023-09-12T15:47:05.000Z

understood will try this

Clown

2023-09-12T15:47:06.000Z

From the docs ^

Cape lionOP

2023-09-12T15:47:19.000Z

Thanks alot buddy

Cane di Oropa

2023-09-27T05:41:56.000Z

I am having this same issue. ðŸ˜ðŸ˜

Cape lionOP

2023-09-27T05:42:18.000Z

Whats up?

My issues was solved

What issue you are facing?

Cane di Oropa

2023-09-27T05:43:25.000Z

unexpected file

Cape lionOP

2023-09-27T05:43:30.000Z

Place your font file in app dir

2ndly make sure to keep your file name same as you downloaded it

And its simple

Clown

2023-09-27T05:44:08.000Z

If the accepted answer doesnt solve your issue, open up another #help-forum with the questions and any code that may be necessary

Cane di Oropa

2023-09-27T05:44:18.000Z

Alright lemme try again, I renamed for my other app and didnâ€™t have any issue though.

Cape lionOP

2023-09-27T05:44:43.000Z

Look impact.tff

Ttf*

Layout.ts

Thats it !

Cane di Oropa

2023-09-27T05:46:41.000Z

It doesnâ€™t work. ðŸ˜

Clown

2023-09-27T05:46:48.000Z

Does that even work in production?

Cape lionOP

2023-09-27T05:47:00.000Z

Its does work

Clown

2023-09-27T05:47:03.000Z

You should be putting fonts and stuff in public/ folder

risky

2023-09-27T05:47:10.000Z

ohh i thought it was solved ;( edit: diferent person

Clown

2023-09-27T05:47:30.000Z

Open up a new thread

Cape lionOP

2023-09-27T05:47:33.000Z

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

Clown

2023-09-27T05:49:55.000Z

weird. Placing impact.ttf inside public folder should mean you only have to do "/impact.ttf"

Cape lionOP

2023-09-27T05:50:57.000Z

Yup doesn't work ðŸ™‚ btw programming is weird itself

risky

2023-09-27T05:51:03.000Z

can you now make new thread

Cape lionOP

2023-09-27T05:51:54.000Z

@Cane di Oropa

Cane di Oropa

2023-09-27T05:59:14.000Z

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. ðŸ˜‚ðŸ˜

dumbboy

2023-09-27T06:00:39.000Z

Noice, consider closing the issue with the message that solved your problem

Cape lionOP

2023-09-27T06:01:06.000Z

Perfect!

Clown

2023-09-27T06:01:20.000Z

Its already a closed issue lol.

dumbboy

2023-09-27T06:01:53.000Z

Oh, I don't scroll to top

Cane di Oropa

2023-09-27T06:03:00.000Z

Yoo, I am in your dm. ðŸ‘‹ðŸ¾

Entlebucher Mountain Dog

2024-02-08T07:13:21.000Z

@Clown how to conditionally change fonts ?
i was trying like this way but not working

Clown

2024-02-08T07:39:51.000Z

Create a new #help-forum post