Reputation: 5559

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

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)

Upvotes: 42

Answers (4)

user23497922

Reputation: 11

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

Upvotes: 1

rottitime

Reputation: 2461

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: []
}

Upvotes: 68

ivadyhabimana

Reputation: 88

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

Upvotes: 7

Yilmaz

Reputation: 49182

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>

Upvotes: 6