Skip to main content

Google Font Display

Enforce font-display behavior with Google Fonts.

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​

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​

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