Next.js, gives us `localFont` to make using local or custom fonts easy. Fonts can be leveraged to draw your user's attention to specific parts of the page or help build your brand by making it more recognizable. A couple different font types generally used are .TTF and .woff2.

In the root of your app, create a `fonts` folder to store your font. Then, with the font you’ve downloaded, drop it into that `fonts` folder. To set the font as my default font throughout the site,  add it to our `layout.js` file, `_app.js` if you’re using the `pages`  directory. `import localFont from 'next/font/local'` . 

Now create a variable to store your font value, set it to `localFont` and set the value of `src` to the path of the font file:

```JavaScript
const rsfont = localFont({ 
	src: '../../fonts/{font-file-name}.ttf'
})
```

Now replace the default font in the `className` of the body element with my new font. `<body className={rsfont.className}>`

```html
<html lang="en">
  <body className={rsfont.className}>{children}</body>
</html>
```

Start the server and the font should be showing on your site! To dive deeper into `localFont` and learn more about fonts and Next.js, [click here](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts) to view Next’s documentation.

Add Local or Custom Fonts to Next.js

by Lucas Minter