「WEB フォント読み込み中のテキストの表示」に対処する方法〜PageSpeed Insights〜

src に local() で指定したシステムフォントと url() で指定した WEBフォントを指定し、その表示を切り替えるように作成します。

@font-face {
font-family: ‘Roboto’, sans-serif;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(https://fonts.gstatic.com/s/mplus1p/v19/e3tjeuShHdiFyPFzBRro_VYUcXm4y4YtjOJGYMp5iAw4B3f5iUc.119.woff2′) format(‘woff’2);
font-display: swap;
}

Google Fonts M PLUS 1p へアクセスします。
( ※ M PLUS 1p フォントは Roboco に含まれています。)

ページの左下の方に、下記のような Roboto フォントが表示されているはずです。＋ をクリックします。

すると、右下に下記のような 1 Family Selected ウィンドウが表示されます。

▲ Specify in CSS に書かれている font-family: は 後で CSS に反映します。まず、STANDARD に表示されたリンクをコピーして下記の手順で設定します。

WordPress 管理画面から、
・押下：「Cocoon 設定」>「Cocoon 設定」
・ページ内：「アクセス解析・認証」タブ
「その他のアクセス解析・認証コード設定」>「ヘッド用コード」に

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

を追加します。

先ほど、コピした URL と Specify in CSS の font-family 情報をベースに @font-face スタイルを作成します。

@font-face {
   font-family: 'Roboto', sans-serif;
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),  url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2)  format('woff'2);
   font-display: swap;
 }
 
@font-face {
   font-family: 'Roboto', sans-serif;
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),  url(https://fonts.gstatic.com/l/font?kit=k3kUo8oPIeJRyV8MHcZ0LmHEG9ut3j_PwJ-v-JYNXg3Ai3V8H_H3E7XlzMhIt0b2w-29Wd6ANO2q7CUwuhr_OPfSYZGYOR6hVN9WDaYNyq2RBHXqfnUwPTa8vFLyh59-Xwnx37IDAFbd3_Jr4bp0KOGB_mLVwjAK0786Bf5UGw3TJnyBiTUeTrep7hVi&skey=a5b3b794406ad1a2&v=v14)  format('woff'2);
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Roboto', sans-serif;
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),  url(https://fonts.gstatic.com/l/font?kit=k3kUo8oPIeJRyV8MHcZkKWHEG9ut3j_PwJ-v-JYNXg3Ai3V8H_H3E7XlzMhIt0b2w-29Wd6ANO2q7CUwuhr_OPfSYZGYOR6hVN9WDaYNyq2RBHXqfnUwPTa8vFLyh59-Xwnx37IDAFbd3_Jr4bp0KOGB_mLVwjAK0786Bf5UGw3TJnyBiTUeTrep7hVi&skey=1f5b7326409871c7&v=v14)  format('woff'2);
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Roboto', sans-serif;
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),  url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2)  format('woff'2);
   font-display: swap;
 }

作成した CSS を Cocoon テーマの sytle.css に追加します。

XServer 環境では、/wp-content/themes/cocoon-child-master/ まで移動して style.css ファイルを開きます。先ほどの CSS 内容をペーストしてファイルを保存します。

WordPress 管理画面から、
・押下：「Cocoon 設定」>「Cocoon 設定」
・ページ内：「アクセス解析・認証」タブ
「その他のアクセス解析・認証コード設定」>「フッター用コード」に

<script 
src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" async></script>
<script>
  WebFont.load({
    google: {
      families: ['Roboco']
    }
  });
</script>

を追加します。

Chrome ブラウザで、「表示」>「開発 / 管理」>「デベロッパ ツール」をクリックするか、 Option + Command + I (大文字 i) キーを押下してデベロッパ ツールにアクセスします。

「Audits」タブをクリックします。

「Device」で「Mobile」か「Desktop」を選択します。
「Audits」>「Performance」だけチェックを入れます。

画面下の「Run Audits」ボタンをクリックして実行します。

しばらくして測定結果が表示されたら、
「Passed audits」に「All text remains visible during webfont loads」と表示されれば OK です。