コンテンツへスキップ
ドキュメントエラーGoogleフォント表示

Googleフォント表示

Googleフォントで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戦略を使用してフォントを具体的に表示する場合は、このルールを無効にできます。