読込完了時のちらつきがつらい

ウェブフォントは、ウェブサイトの見た目を環境によらず統一するために非常に簡単で便利な方法です。

ひと昔前は通信量や通信速度がネックで日本語のウェブフォントを使うのは非現実的でしたが、通信環境がかなり良くなったためウェブフォントが使いやすい状況になってきました。

しかし通信環境が改善されたといってもどうしてもウェブフォントのダウンロード完了までには少しの時間がかかるため、ダウンロード完了時に代替フォントからウェブフォントへの切り替えが起こり、見た目がチラついたりレイアウトが動いたりして煩わしいという問題があります。

このちらつきを解消するため、ウェブフォントがダウンロードされるまではテキストを表示させないようにして、ダウンロード完了時にウェブフォントでテキストを表示するという方法があります。

以下にその方法を説明します。

フォントが読み込まれてからテキストを表示する方法

Googleフォントが読み込まれてからテキストを表示させるのはhtmlのheadタグ内のgoogleフォントファイルへのリンクでdisplay=autoにするだけでOKです。

下記はNoto Sans JPを使う場合の例が下記です。display=autoとしている部分に注目してください。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=auto" rel="stylesheet">

cssはシンプルに下記のように指定すればOKです。

body{
  font-family: 'Noto Sans JP', sans-serif;
}

メリットとデメリット

この方法のメリットは、「代替フォントからウェブフォントへの切り替わりによるちらつきが生じないこと」で反対にデメリットは、「ページ内のテキスト表示が少し遅れること」です。

ウェブフォントを使うと、ページの印象をきれいに、個性的に、整って見せることができますが、どうしても何かのデメリットが発生します。実際に試してみて判断するのが良いと思います。