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

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 を指定するに留めます.

body タグ内の編集

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

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

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

最後に

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