最も簡単にwebフォントの読み込みを遅延させる方法

2019-01-01

web フォントは <head> タグ内で読み込むため，web ページのレンダリングを遅延させてしまいますが，デザイン面においてフォントは重要な要素です．

今回は Google Fonts を使用したフォントの読み込みを遅延させる方法を紹介します．ちなみに，最も簡単な方法なので，より良い方法は他にもたくさんあると思います．

弊ブログでもソースコードを記載しているページがありますが，これを通常のフォントで表示してしまうと 1, l, I の違いがわからない，といった問題が発生するので，見やすいようにフォントを変更しています．

しかし，ページ表示が遅いと離脱率が上昇するため，読み込みを遅延させたいと考えるわけです．読み込みの遅延は非同期読み込みと言われることもあります．

head タグ内の編集

まず，読み込むフォントファイルを <head> タグ内に追加します．ここでは例として Google Fonts の Roboto フォントを使うことにします．

<head>
  ...
  <link
    href="https://fonts.googleapis.com/css?family=Overpass+Mono"
    id="webfont"
  />
</head>

通常のフォントを埋め込む処理では rel="stylesheet" を記述しますが，ここでは ID を指定するに留めます．

PageSpeed Insights 等で求められるのは <head> タグ内での読み込みに時間がかからないことです．これはコンテンツの表示が <head> タグ内の処理を終了してから行われるからですが，今回の読み込み遅延はこれを利用しています．

(function () {
  var webfont = document.getElementById("webfont");
  webfont.rel = "stylesheet";
})();

先ほど設定した ID を使って属性を後から変更することで，フォントを読み込ませます．

npm が使える環境であれば Web Font Loade がよさそうです．