Skip to content
dev-docs

Google Font Display

Source URL: https://nextjs.org/docs/messages/google-font-display

Google Font Display

Section titled “Google Font Display”

Enforce font-display behavior with Google Fonts.

Why This Error Occurred

Section titled “Why This Error Occurred”

For a Google Font, the font-display descriptor was either missing or set to auto, block, or fallback, which are not recommended.

Possible Ways to Fix It

Section titled “Possible Ways to Fix It”

For most cases, the best font display strategy for custom fonts is optional.

import Head from 'next/head'


export default function IndexPage() {
  return (
    <div>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional"
          rel="stylesheet"
        />
      </Head>
    </div>
  )
}

Specifying display=optional minimizes the risk of invisible text or layout shift. If swapping to the custom font after it has loaded is important to you, then use display=swap instead.

When Not To Use It

Section titled “When Not To Use It”

If you want to specifically display a font using an auto, block, or fallback strategy, then you can disable this rule.

Section titled “Useful Links”