mitchel inaju

Posted on Apr 24, 2023 • Originally published at mitchel.hashnode.dev on Apr 24, 2023

How To Add Fonts In A Next 13 App

#react #nextjs #typescript

Overview

In this article, I'll show you how Nextjs 13 now allows us to optimize our fonts with the next/font package. There is no need to download the Google fonts locally and no need for CDN links.

Google Fonts

To use Google fonts in your Nextjs app, you should use the recommended next/fonts/google to load Google fonts.

For increased privacy and performance, next/font will automatically optimize your fonts (including custom fonts) and remove external network queries.

For this post, we are going to use the poppings fonts from Google.

Locate your Layout.tsx and add this code snippet, edit it to your use.

import { Poppins } from 'next/font/google';

const poppinsFont = Poppins({
  weight: '700',
  subsets: ['latin'],
  variable: '--font-poppins',
});

Make sure you use the variable configuration prop, which you will use to generate a definition for a CSS --var for each font. This would ensure that we have the best performance and flexibility.

Local Font

With the same library next/font/local you can make use of local fonts stored locally on your repository, so no need to download any extra module.

Make sure that you correctly put in the path to the locally stored font, it's fine to host it in your public directory. Remember to use the variable configuration prop, which you will use to generate a definition for a CSS --var for each font.

Add this file to your layouts.tsx file

import localFont from 'next/font/local';

  const studioPro = localFont({
    src: [
      {
        path: '../../public/font/studio-pro-bold.ttf',
        weight: '500',
        style: 'normal',
      },
      {
        path: '../../public/font/studio-pro-medium.ttf',
        weight: '400',
        style: 'normal',
      },
    ],
    variable: '--font-studio-pro',
  });

Accessing The Font

To access the font through your app, you should pass the generated variables into the wrapper class in Layout.tsx. This would ensure that the variable you passed is accessible to any parent component.

Your Layout.tsx file should look like this


import { Poppins } from 'next/font/google';
import localFont from 'next/font/local';
import React from "react";

export default function RootLayout({ children }: {children: React.ReactNode }) {
  const poppinsFont = Poppins({
    weight: '700',
    subsets: ['latin'],
    variable: '--font-poppins',
  });

  const studioPro = localFont({
    src: [
      {
        path: '../../public/font/studio-pro-bold.ttf',
        weight: '600',
        style: 'normal',
      },
      {
        path: '../../public/font/studio-pro-medium.ttf',
        weight: '400',
        style: 'normal',
      },
    ],
    variable: '--font-studio-pro',
  });

  return (
    <html lang='en'>
      <head />
      <body className={`${poppinsFont.variable} ${studioPro.variable}`}>
            {children}
      </body>
    </html>
  );
}

You should see something like this on your Chrome browser tools

Access the Font on your CSS files

Here's how to access the font in a simple css file, you can use this in your global.css file

html {
  font-family: var(--font-poppins);
}

h1 {
  font-family: var(--font-studio-pro);
}

Access the Font with Tailwind

We have made this font globally accessible, but we need a way to tell Tailwind that these fonts are now accessible.

How To use this font in Tailwind, add this to the extend object inside the theme in your tailwind.config.ts file.

export default {
  theme: {
    extend: {
      fontFamily: {
        "font-poppins": "var(--font-poppins)", 
        "studio-pro": "var(--font-studio-pro)", 
      }
    }
  }

Here's how to use the font in a component.

const SimpleComponent: React.FC = () => (
  <p className="font-poppins">
    This is with the Poppins Font
  </p>
);

export default SimpleComponent;

Final Thoughts

Thanks for reading, We've seen how easy it is to add fonts to a Nextjs app, I'll recommend using this approach to add fonts in your Nextjs app as this is the optimized way recommended by the documentation. It's time to experiment!! Looking forward to the amazing websites you'll build with Nextjs.