Using Google Fonts in NextJs 13 with @next/font

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

Alongside all of the other goodies and new features of NextJs 13 we also got a ready-to-use custom font system.

One disadvantage of using custom fonts (like Google Fonts or TypeKit) is the fact that our browser needs to do an extra HTTP request to get them. This means that while the custom font is not loaded we will get the fallback front, and when the fonts are replaced we will see a CLS - Cumulative Layout Shift.

The new NextJs font library is aiming to fix exactly this issue by putting the custom font on the local server, plus using CSS size adjust to reduce the layout shift.

Let's see how we can use the NextJs font library.

We will start from a simple page that only display the below static text:

screenshot of a basic webpage with no custom font added

Installing the NextJs @next/font font library

Given that it contains quite a big number of custom fonts the @next/font needs to be installed separately.

We will need to run this in our main folder:

npm i @next/font

Be sure to restart the server, or you may get the below error:

Error: @next/font/google failed to run or is incorrectly configured.
If you just installed `@next/font`, please try restarting `next dev` and resaving your file.

Using the NextJs @next/font for Google Fonts

After the installation is done we can use the font library. The best place to import the custom fonts is in the main app layout.

For example, we will import the Roboto font and specify that we want to set its weight to 900:

// app/layout.js
import {Roboto} from '@next/font/google'

const roboto = Roboto({
  weight : ['900']
})

The roboto object will provide a unique class name that we can use to define the element that will have this font. In our case, we used it use on the body of the document:

// app/layout.js

// create roboto font; see below

export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body className={roboto.className}>{children}</body>
    </html>
  )
}

And with this in place, now our initial page will look like this:
screenshot of a webpage where we added a NextJs Google font

You can check out the full code here.

Keep in mind that if you don't set a weight to your font you will get the below error:

error - Font loader error:
Missing weight for font `Roboto`.
Available weights: `100`, `300`, `400`, `500`, `700`, `900`

This does not apply to the variable fonts. Actually, they are preferred from a performance point of view.

In the next post, we will see how to use the NextJs font library to load local custom fonts.

And speaking of fonts, you can check out here an example of how to use the Font Awesome icons with NextJs.

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X