「ウェブフォント読み込み中の全テキストの表示」問題の解決方法

2019年11月21日 HTML&CSS

引き続き，PageSpeed Insights の診断で表示される問題について扱う．

ウェブフォント読み込み中とは

ウェブフォントとはサーバー上に置かれたフォントを呼び出して文字を表示できるようにしたフォントのことです．
通常，OS に入っているシステムフォントを使ってブラウザの文字は表示されますが，それだと使っている OS の制約を受けます．

ウェブフォントなら，読者の使っている OS に縛られることなく自由にサーバー側でフォントを決めることが出来ます．

ただし，フォントなので読み込む時間が発生します．システムに組み込まれたフォントなら一瞬ですが，ネットからダウンロードしてきますから，それなりの時間がかかります．

そこでウェブフォント読み込み中にどうにかならないか？というのが今回指摘された問題です．

全テキストの表示とは

読み込み中に何も表示されないのではイライラしますし，またレイアウトも確定しません．
そこで，「代替のフォントを指定しておいてウェブフォントが読み込まれ次第，差し替える方法をとってみたら？」というのがこの PageSpeed Insights のアドバイスなわけです．

いくら設定しても改善されない方へ

「ウェブフォント読み込み中の全テキストの表示」で検索すると多数の解決策が書かれたページが出てくるが，その通りにやってもうまく行かない．
仕様が変わってしまった可能性が大きいのだが，その説明ページを PageSpeed Insights で調査しても，
ウェブフォント読み込み中の全テキストの表示
の問題が出てくる．

3日間ぐらい悩んだが，現時点(2019年11月)で実際に解決できた．
(恐らく，投稿された時点ではちゃんと動いて「合格」していたのが仕様が変更されたのだろう．)

苦労したので助かる人もいるのではないかと思い，記事にする．

今回，うまく行かなかったのは webフォントである Font Awesome を使ったケースだが，他のウェブフォントでも同じ状況に陥る可能性はあるかもしれない．

@font-face は上書きできない模様

結論からいうと，これが肝だった．

「ウェブフォント読み込み中の全テキストの表示」でググったページ では，みな一様に

@font-face{
  font-family: "Font Awesome 5 Free";
  font-display: swap;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}

という記述を加えることをアドバイスしている．
url は警告が出たフォントファイル．
(この設定は自分のところにウェブフォントを置いた場合)

url は環境によって違うのでURLを絶対パスにしないとダメとか書かれているページもある．
理屈は分かるのだが，どうしても警告状態が消えない．何か違う原因で動かないようだ．
この通りに設定をして，さらに絶対パスに代えたりいろいろしてみたが警告が消えない．

色々試して分かったのだが，どうも @font-face は後から同じ定義をしても上書きされないようだ．

そして，all.css の中にこの設定と同じ設定が書いてあるのである．

つまり，

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous">

のように書いてしまうともう font-display の設定を上書きできないので設定を変えようがない．
ちなみに font-display は初期状態で auto になっている．
つまり，このファイルは自分のところに持ってきて，swap に書き替えるしかないのだ．
これに気づくのに3日間かかった．．．

fontawesome を使う場合の css の書き方

弊社の環境では fas しか使っていなかったので，最小の設定を目指した．
その場合，以下の設定だけでよい．これを fa.min.css などと名前を付けて保存する．(右クリックして，「名前を付けて保存」で保存できます．)
v5.11.2 の場合を書いてある．バージョンは自分の使っているものに合わせて変更すればよい．
fas の方で font-family の2番目に代替フォントとして，sans-serif を設定している．この設定はしなくても speedinsight の警告は消えるが意味的にはあったほうがいいだろう．
ただし，下で使っているアイコンには sans-serif に対応する文字はないので，□が表示される．そういう意味ではこの設定に意味はない．
いずれにしても合格にはなる．

.fas {
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  display:inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  line-height:1;
  font-family:"Font Awesome 5 Free",sans-serif;
  font-weight:900
}
@font-face {
  font-family:"Font Awesome 5 Free";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot");
  src:url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
      url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff2") format("woff2"),
      url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff") format("woff"),
      url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.ttf") format("truetype"),
      url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg")
}

このスタイルシートを

@import url("fa.min.css");

のように他のスタイルシートから呼び出すだけでよい．

例えば，html は

<i class="fas angletoggle"></i>

css は

.angletoggle:before {
  content: "\f107";
}

と書いてやれば表示される．

さらに先に読み込ませておくためには

<link rel="preload prefetch" as="font" type="font/woff2" href="https://use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff2" crossorigin>

を入れておけばよい．

これで，ウェブフォント読み込み中の全テキストの表示は合格した監査に移動できた．

Noto Sans を使う場合

Google と Adobe が共同開発したフォント．
こちらを使う場合も当然 display=swap がないと警告される．

詳しい設定は待望の正式版！WebフォントNoto Sans JPの使い方・ダウンロード方法を紹介！さんが分かりやすいので参照してください．

簡単にいうと，Google の Noto Sans JPに行き，使いたいフォントを選択して埋め込むタグをコピーしてきます．

例えば，

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese" rel="stylesheet">

のようになります．
display=swap が入っていると「ウェブフォント読み込み中の全テキスト」問題には引っかかりません．