Adding Google Fonts To Next.Js 14 In Three Ways: A Step-By-Step Guide
Published: 2023-12-28 10:30:52

by [Andrew Okpainmo](https://blog.openreplay.com/authors/andrew-okpainmo)


<blockquote><em>
Adding Google Web Fonts to a Next.js project is optimized because the fonts are bundled at build time, and this article will show you three ways to manage this so your web app achieves maximum performance.
</em></blockquote>


<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>


[Next.js](https://nextjs.org/) now comes with some amazing improvements/additions that have caused front-end engineering in the [React](https://react.dev/) ecosystem to take a more awesome and performance-inclined path.

With super-impressive introductions like the use of client and server components, new data fetching patterns, the new routing patterns inside the app router, and more, One other performance-boosting feature in Next.js is the way [Google fonts](https://fonts.google.com/) can be used.

From `Next.js 13` on, Google fonts usage takes a different approach. This approach provides some extra performance boost because the (custom) fonts are now bundled into the application at *build time*. Hence, no request is made to fetch fonts whenever the app is used.

In this article, and in line with this new *build time* approach of adding Google fonts to Next.js applications, I’ll show three different ways to add them to your next Next.js project.

We’ll install a Next.js application bootstrapped with [`Tailwindcss`](https://tailwindcss.com/).

## Installing a new Next.js application (with Tailwindcss)

Installing a Next.js application is very easy. Refer to the [**installation page on the Next.js docs**](https://nextjs.org/docs/getting-started/installation) for a detailed installation process outline.

**Simply ensure that you use the app router while installing the app.** You can proceed once you’re done with the installation.

## Analyzing Google fonts usage in the Next.js layout file

The app's entry point is the `layout.js` file in a new Next.js installation. Hence, as seen in the screenshot below, Google fonts can be imported inside that file and applied to any available element or component that wraps the remaining part of the app.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image1.png)


Customizing the font is one process carried out before wrapping the remaining parts of the app with the fonts. As shown on **line 4** in the above screenshot, a simple customization was carried out on the font before it was finally used.

Using a Google font in Next.js is as flexible as the regular method we’ve been using (maybe even more flexible). You can use multiple fonts, set your font weights, and make other customizations, which we will see later in this article.

Let’s see three different methods for adding Google fonts to Next.js using this new *build time* font usage approach.

## Method 1: Using Google fonts in Next.Js 14 through CSS (variables and selectors)

The first method will require using CSS *variables* and any CSS *selector* you choose.

### A quick recap of variables and selectors

Variables are common terms in programming languages, but for some years now, we’ve had the use of variables (also known as custom properties) in CSS.

The code sample below shows how variables can be created and used in CSS.

```css
:root {
 --spacing: 10px;
}

.button {
 padding: var (--spacing) var (--spacing * 2);
 margin: var (--spacing);
}
```

On the other hand, CSS selectors are patterns used to target HTML elements in web pages.
Below are some examples of CSS selectors and their type names.
```
*Type Selector* or *Element Selector*:
selects HTML elements by their types.
Example: `div` (selects all `div` elements).

*Class Selector*:
selects HTML elements by the `class` names assigned to them.
Example: `.btn` (selects all elements with the `class` attribute value set to `"btn"`).

*ID Selector*:
selects HTML elements by the `id` names assigned to them.
Example: `#header` (selects the element with the `id` attribute value set to `"header"`).
```

As you can see, these (CSS elements and selectors) are basic CSS concepts, but I thought I would explain them just in case you need a refresher on what they are. You’ll need this knowledge as we proceed in this article.

### Importing and setting up the fonts inside the layout file

Checking the screenshot above, you’ll find that only one font was imported and used. Also, in that screenshot, the method used to add the Google fonts is the default `className` method, which we’ll cover later in this article.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image2.png)

As seen in this second screenshot above, multiple (two) fonts were imported and used. You can also see how to import and use multiple fonts in Next.Js 14.

### Explaining the implementation process

1. **FIRSTLY**: From this second screenshot, the two fonts were imported, attached to different variables, and configured as seen above. They were configured with different selections, which you can learn about and add to your project.

The two most relevant configurations in the above screenshot are the *variables* and the *font weights* (weight).

2. **SECONDLY**: From the screenshot above, it can also be noted how a `nunito_sans` (font) `class` was attached to the `main` element that served as the wrapper of the `children` *prop*. We will then need to set that up (and that of the `poppins` font as well) inside the CSS file imported in the `layout.js` file, as shown in the second screenshot above. Below is a third screenshot showing the implementation of that.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image3.png)


**NB**: Observe carefully how the same variable was used in the font configurations that were called here inside the CSS. Note, however, that you can use any selector pattern you wish. (selector patterns were explained above). For example, you can target HTML *elements* directly instead of classes.

3. **FINALLY**: since we selected multiple fonts and have used only one of them - the `nunito_sans` (font) `class`, we can now practically use the other at any point inside our app without any further hassle. Below is an implementation of that in a fourth screenshot.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image4.png)

### Extracting the font setup into a different font utility file

After all the setups implemented above, we can see that our work can be made cleaner by extracting the font setup into a separate utility file. This will result in a font utility file like the one in the fifth screenshot below.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image5.png)

Our `layout.js` file will look as simple as shown in the sixth screenshot below. Please observe closely how the fonts (configuration variables) were exported as new JavaScript variables and then imported and used in the `layout.js` file.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image6.png)

NB: Also observe, and take note that the `nunito_sans` (font) class used on the `main` element that wraps the `children` prop is different from the JavaScript variable imported from the `utils` file even though they were spelled the same. You can alter the spellings to avoid confusion/errors.

This method is my favorite because it simplifies your work in the long run as you build. Once your setup is done, you just call customized font classes and enjoy the build.


<CTA_Middle_Design />



## Method 2: Using Google fonts in Next.js 14 through Tailwindcss configuration

The next method involves setting up the fonts using a `Tailwindcss` configuration file.

### A quick recap of the Tailwindcss configuration file

The `Tailwindcss` configuration file is a file that contains `Tailwindcss` configurations for your project. Below is the `Tailwindcss` configuration file of the app installed for this demo.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image7.png)


### Importing and setting up the fonts

We won’t start from scratch before refactoring our code and bringing in the font utility file to implement fonts using this second method. The font utility file will stay the same as the first method discussed above, as shown in the screenshot below.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image8.png)

The differences in this case will come from:

- the usage of the fonts inside the project, and 
- the fact that we won’t be handling our font setup with CSS (variables and selectors)*, but inside our `Tailwindcss` *config file*.

### Explaining the implementation process

1. **FIRSTLY**: As explained above, we have established that our font utility file will stay the same. We can now set the font inside our `Tailwindcss` config file.

2. **SECONDLY**: Below is how the `Tailwindcss` config file will look.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image9.png)

The notable change here is the addition of a `fontFamily` object/setup inside the `extend` object, which is, in turn, contained inside the `theme` object of the `Tailwindcss` config file. That is all we need to do.

3. **FINALLY**: We can now use the fonts anywhere inside our app as we did in the previous method. But in this case, **we’ll need to prefix each font `class` with the “font” keyword**. So the `nunito_sans` (font) `class` will become `font-nunito_sans` and the `poppins` (font) `class` will become `font-poppins` - all as shown below in the two screenshots for the `layout.js` file, and the `page.js` file respectively.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image10.png)


![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image11.png)

## Method 3: Using Google fonts in Next.js 14 through the default className method

The final method in this article is the default method used in a fresh Next.js 14 installation.

### Understanding the native/default className method

This default method, used in fresh Next.js app installations, has some disadvantages. One problem with this method is that you must keep converting your line of `class` names into `JSX` since the fonts are imported and configured in Javascript format using variables. The other two methods discussed earlier involved the use of CSS, making them easier to use; hence,, they give you a better developer experience as you build ahead.

Below is what the font import and usage look like in a new Next.js app installation.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image12.png)

### Importing and setting up the fonts

The font import will remain the same inside the *font utility file*for this method. But we will need to make some changes.

### Explaining the implementation process

1. **FIRSTLY**: in this method, the `export` from the font utility file will be with the `className` (e.g., `nunito_sans_init.className`) instead of the CSS variable (e.g., `nunito_sans_init.variable`) as used in the two previous methods. Also, note that we’ll not need any further setup inside the *global CSS file* or the `Tailwindcss` config file as we did in the other two methods.

See the implementation in the screenshot below.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image13.png)

2. **FINALLY**: We can now use the JavaScript variables we exported from the font utility file on every `className` property inside our app, as shown in the screenshots below.

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image14.png)

![-](https://blog.openreplay.com/images/adding-google-fonts-to-nextjs-apps/images/image15.png)

Another problem with this method is that we must keep importing the fonts into whichever file we use them in.

This method is suitable for simple projects or projects where you need to use only a single font. However, it becomes challenging if you need to use multiple fonts.

## Comparing and commenting on the three different methods explained

All three methods discussed in this article have their pros/cons. Here are my comments on how to use them.

- Use the CSS (variables and selector) method or the `TailwindCSS` config method if you’re building a project that requires multiple fonts. Especially one that is medium or large-sized. This will give you the flexibility and ease of only calling CSS class names and having your fonts work flawlessly.

The problem with these two methods lies in how long it’ll take you to set things up. However, that will no longer be a problem after you’ve mastered the steps.

The CSS (variables and selector) method is my number one recommendation since it’s the easiest to use. The impressive developer experience it gives you is just incomparable.

- Use the default `className` method if you are building a simple or small-scale project. This method will also be a perfect choice if you’re building a project that requires only a single font.

## Conclusion

There you have it. Three awesome ways to use Google fonts in Next.js 14 applications: to make the best use of the new *build time* approach and to give your app users the better UX (user experience) they deserve.

I trust you found so much value in reading this.

Thanks for Reading.

Cheers!!!