How to add custom local fonts to a Nextjs 13 Tailwind project?

Asked 29/11, 2022 at 0:45 Answered 10/6, 2024 at 6:4

I have downloaded a couple fonts (NOT GOOGLE FONTS) and I want to add and use them in my Nextjs 13 Tailwind project.

I've followed the Nextjs docs to try add a single font (I want to add multiple fonts but trying to get a single font added isn't working):

npm install @next/font
Add the downloaded font files to /pages/fonts
Add the fonts to /pages/_app.js
Add the fonts to tailwind.config.js
Use font in a component

Updated /pages/_app.js

import localFont from '@next/font/local'

const surt = localFont({
  src: './fonts/Surt-Normal-Bold.woff2',
  variable: '--font-surt-bold',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={surt.variable}>
      <Component {...pageProps} />
    </main>
  )
}

Updated tailwind.config.js (Surt is a sans-serif font)

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-surt)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}

Updated About page

export default function About() {
  return <div className="font-surt-bold">About</div>
}

What am I doing wrong and how would I update the code to add another font (eg Surt-Normal-Regular.woff2, Surt-Normal-Semibold-Italic.woff2)

Cola answered 29/11, 2022 at 0:45 Comment(0)

Full credit goes to Lee Robinson and official v13 doc for my post.

The below will also help you with the new v13 /app directory.

1. Install next fonts

npm install @next/font

2. Download your fonts

In my case I downloaded the Poppins fonts and placed them in /public/fonts/

3. Link to your fonts file

As per docs you can edit your _app.js.

Link to your local fonts
assign a variable name
assign the class name to a parent html tag

In my case I am using the new app directory: /src/app/layout.tsx

import localFont from '@next/font/local'

const poppins = localFont({
  src: [
    {
      path: '../../public/fonts/Poppins-Regular.ttf',
      weight: '400'
    },
    {
      path: '../../public/fonts/Poppins-Bold.ttf',
      weight: '700'
    }
  ],
  variable: '--font-poppins'
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${poppins.variable} font-sans`}>
    ...

4. Reference in Tailwind config

As per docs you can now reference the new variable in your tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}', // Note the addition of the `app` directory.
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
   
    extend: {
      fontFamily: {
        sans: ['var(--font-poppins)']
      }
  
    }
  },
  plugins: []
}

Edris answered 11/1, 2023 at 17:30 Comment(5)

Hi. do you have any idea how to do the same in a MUI project? I want to set font-family inside MUI global theme and also be able to use different styles of a single font-family. – Quince 13/3, 2023 at 14:46

is there any difference if i use otf file? right now i am converting to ttf to be safe side – Papyrology 20/3, 2023 at 5:43

next/font is included by default since Next.js 13, so you can import it without the @ character - import localFont from 'next/font/local' - vercel.com/blog/nextjs-next-font – Belongings 18/4, 2023 at 6:55

For me the "font-sans" class name was missing. Thanks for this! – Dhobi 24/12, 2023 at 11:57

What if you have multiple custom local fonts that you want to import? i.e a heading font that wouldn't be applied to <main>? – Bach 16/2, 2024 at 20:42

If you console.log(surt),

const surt = localFont({
  src: "../fonts/test.woff2",
  variable: "--font-test-bold",
});
console.log("surt", surt);

you get this

// I used different font so values might be different
surt {
  style: { fontFamily: "'__surt_899d56', '__surt_Fallback_899d56'" },
  className: '__className_899d56',
  variable: '__variable_899d56'
}

You dont need any configuration. All you have to do is apply this surt.className to an element and that font will be applied to all children.

 <main className={surt.className}>
      <Component {...pageProps} />
    </main>

It works both for client components and app directory

how to apply this to any component in the project

I did the above configuration in _app.js and I did use any className or variable

import localFont from "@next/font/local";

const surt = localFont({
  src: "../public/test.woff2",
  variable: "--font-surt",
  // I added this maybe fallback works but it did not
  fallback: ["'Apple Color Emoji'"],
});
console.log("surt", surt);
export default function MyApp({ Component, pageProps }) {
  return (
    <main>
      <Component {...pageProps} />
    </main>
  );
}

After you configure the tailwind.css the way you did, we should be able to use font-sans class anywhere in the project but no matter what I tried, tailwind does not inject it (it must be a bug). Workaround is like this. If you console the font, you will get this:

className: "__className_899d56"
style: {fontFamily: "'__surt_899d56', 'Apple Color Emoji','__surt_Fallback_899d56'"}
variable: "__variable_899d56"

I copied the style property from console (You could prop drill) and manually used it:

<p
    className="'__className_899d56'"
    style={{ fontFamily: "__surt_899d56" }}
  >
    with font testing
  </p>

Nadanadab answered 29/11, 2022 at 4:54 Comment(1)

Thanks for this! How would you add multiple fonts and use the font in a particular component.. not applying to all components – Cola 29/11, 2022 at 5:18

After setting up TailwindCSS the way you did to use the font you should also add font-sans in the className you want to add the font to.

In this case, your _app.js should be

import localFont from '@next/font/local'

const surt = localFont({
  src: './fonts/Surt-Normal-Bold.woff2',
  variable: '--font-surt-bold',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${surt.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

If you want to have different variants of the same font you can pass an array to the font src instead.

You can do it this way

const surt = localFont({
  src: [
    {
      path: "./fonts/Surt-Normal-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "./fonts/Surt-Normal-Bold.woff2",
      weight: "700",
      style: "normal",
    },
    {
      path: "./fonts/Surt-Normal-Black.woff2",
      weight: "900",
      style: "normal",
    },
  ],
  variable: "--font-surt-bold",
});

it is mentioned in the docs Here

Centi answered 6/1, 2023 at 16:48 Comment(0)

Just Change the font in pages/_app.js

From this :

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
   return (
      <main className={inter.className}>
        <Component {...pageProps} />
      </main>
   )
 }

To your font (eg. Outfit):

import { Outfit } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const outfit = Outfit({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
   return (
      <main className={outfit.className}>
        <Component {...pageProps} />
      </main>
   )
 }

For more info, Check doc

Nativeborn answered 10/6, 2024 at 6:4 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

1. Install next fonts

2. Download your fonts

3. Link to your fonts file

4. Reference in Tailwind config

Recommended topics

Hot tags