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

Google Font Display

Google Fonts の font-display の動作を強制します。

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

Google Font では、font-display 記述子が欠落しているか、推奨されない auto、block、または fallback に設定されていました。

修正方法

ほとんどの場合、カスタムフォントの最適な font-display 戦略は 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 戦略を使用して特定のフォントを表示したい場合は、このルールを無効にすることができます。