Google Fonts with NextJS and Styled Components

Before you say anything, yes I know Styled Components are not the fancy new way to style applications. They're not great with Server Rendered components and increase what the browser has to download and do.

But if you are stuck with a NextJS application that you've built with Styled Components, and are using NextJS v13 or over, and want to use the `next/font` option to better handle fonts, then this short guide is for you.

This is exactly what I had to do and some things that the guides miss out.

Existing google fonts

Originally I loaded in the Google fonts via an import and then referenced them within the global CSS like I used to do.

next/font

If you are using NextJS v13 then they advise you to make use of `@next/font` and install it as a package.

But since v14, you don't need to do that and can just import from `next`

So, if you have 13, run this:

Then when you import` you import `@next/font/google` instead of `next/font/google` in the example below.

Updating Next Application

Depending on if you are using the pages file structure or the app file structure, it will change where you load the fonts from.

I believe, if you use the app structure, then you need to add it to the `layout` file.

I am using the page layout to show you how to add it with that method. But I believe they are transferable.

Importing font

Within the `_app.jsx` under the `pages` folder, we want to import the font.

Here we are importing the same way it advises in the NextJS Documentation. Specify the name of the Google Font that you wish to use.

Instantiate the font

Then we need to instantiate the font before we can use it. Again, this is pretty much the same as the example they give you in the documentation.

The only difference is that, although we're going to create a CSS variable for the font, we're not going to use the `variable` prop which is available. That's because it doesn't seem to work with a `global.css`

Create each font you want to load. Adjust the fonts to what you require with Font Weights. These are all available on the Google Font page.

Creating the CSS Variable

Next, we need to create the CSS variables. We can do this by manually injecting styles and the CSS Variables. You can then use these variables within your Components Styled props.

We create a Style element and we give it a `jsx` and `global` prop.

This will create variables `--font-roboto` and `--font-oswald` which can then be used in all the places above.

Round up

Although there are probably better ways to do this, I believe this is sufficient to make use of the Font caching provided by NextJs.

Eventually, I will move away from Styled Components once I find something that provides the benefits of Server Rendering with the nice Dev Experience of Styled Components.

Whatever I choose to go with, most of what we've done above can be reused. I fully expect it to be removing code, like the Styled element you have to inject into the root of the app. We should just be able to use the `variable` prop provided with the create font function.