DEV Community

Cover image for Next.js - How to optimize fonts
James Perkins
James Perkins

Posted on • Originally published at jamesperkins.dev

4 2

Next.js - How to optimize fonts

Next.js Font Optimized

When using 3rd party fonts we have to make sure they are optimized, in the times before Next.js 10.2 you had to manually optimize them for example:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet" />
<link
   href="https://fonts.googleapis.com/css2?family=Squada+One:wght@400&display=swap"
   rel="stylesheet"
   />
Enter fullscreen mode Exit fullscreen mode

After 10.2 Next.js can now optimize Google fonts and Typekit with a variety of font optimization, inside your _document.js you can now provide the font:

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
Enter fullscreen mode Exit fullscreen mode

You can even provide the preferred display options as a query parameter :

  • block : The text blocks (is invisible) for a short period
  • swap: There is no block period (so no invisible text), and the text is shown immediately in the fallback font until the custom font loads
  • fallback: This is somewhere in between block and swap. The text is invisible for a short period of time (100ms). Then if the custom font hasn't been downloaded, the text is shown in a fallback font (for about 3s), then swapped after the custom font loads.
  • optional: This behaves just like fallback, only the browser can decide to not use the custom font at all, based on the user's connection speed (if you're on a slow 3G or less, it will take forever to download the custom font and then swapping to it will be too late and extremely annoying)
  • auto: This basically ends up being the same as fallback.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay