コンテンツをスキップ
ドキュメントエラーGoogle Font Display

Google Font Display

Google Fontsで`font-display`の挙動を強制する。

このエラーが発生した理由

Googleフォントの場合、`font-display`記述子が欠落しているか、`auto`、`block`、または`fallback`に設定されていますが、これらは推奨されません。

考えられる修正方法

ほとんどの場合、カスタムフォントに最適なフォント表示戦略は`optional`です。

pages/index.js
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>
  )
}

`display=optional`を指定することで、不可視テキストやレイアウトシフトのリスクを最小限に抑えられます。カスタムフォントが読み込まれた後にフォントを切り替えることが重要である場合は、代わりに`display=swap`を使用してください。

使用しない方がよい場合

フォントを`auto`、`block`、または`fallback`戦略で特に表示したい場合は、このルールを無効にできます。