How To Add Fonts In A Next 13 App
Tags: react, nextjs, typescript
Published: 2023-04-24 02:54:08

---
title: How To  Add Fonts In A Next 13 App
published: true
date: 2023-04-24 02:23:39 UTC
tags: #react #next #typescript
canonical_url: https://mitchel.hashnode.dev/how-to-add-fonts-in-a-next-13-app
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/229e94bjgmn2o70xfzdo.png)

## 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](https://fonts.google.com/) 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682177998348/41a55ae9-c098-44e7-b032-4509cc0e6597.png)

## 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.

### Connect With to me

Linkedin : [https://www.linkedin.com/in/mitchel-inaju/](https://www.linkedin.com/in/mitchel-inaju/)

Twitter: [https://twitter.com/mitchelinaju](https://twitter.com/mitchelinaju)

dev.to: [https://dev.to/inaju](https://dev.to/inaju)