Google Fonts を非同期で読み込みサイトスピードを高速化

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

デバイスを問わず、表示させたいフォントを表示できるのが Google Fonts です。

また、豊富な種類を無料で利用できるのも嬉しいポイント。

さらに、2018 年 9 月 28 日より、それまでアーリーアクセス版だった日本語フォントが正式版として提供されました。

しかし、サイト表示が遅くなるデメリットがあります。遅くなる原因の 1 つが、レンダリングをブロックしてしまうこと。

そこで Web Font Loader を使い、非同期で読み込む方法をご紹介します。

Web Font Loader を使えば、レンダリングをブロックせずに Google Fonts を利用できます。

よりサイトを高速化したい場合には、Web Font Loader ではなく rel="preload" で先読みする方法がおすすめです。使い方は、下記のページで解説しています。

AMP にも対応!Google Fonts を preload で先読みし最適化

Web Font Loader とは?

Web Font Loader は、Google と Typekit が共同開発したフォントの読み込みを制御できる JavaScript ライブラリです。

ソースコードは GitHub で公開されており、無料で利用できます。

また、Binar::Apps が紹介している 「FOUT with Web Font Loader」 が、おすすめの使い方。

この記事では sessionStorage を使い、Web Font Loader を利用しています。

そのため、サイト訪問者がブラウザを閉じるまで、ページを移動しても Web フォントを再読み込みする無駄が生じません。

Web Font Loader の使い方

Web Font Loader の使い方は、非常に簡単です。

Google Fonts で公開されているフォントは、フォント名を指定するだけで非同期で読み込めます。

Roboto の regular 400 を読み込ませる場合には、下記のコードを用います。JavaScript を書くファイルに追加するか、<script></script> で囲みインラインで記述します。

window.WebFontConfig = {
  google: { families: ['Roboto'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

2 行目の google: { families: ['Roboto'] }'Roboto' で使用するフォントを指定します。

正式版となった日本語フォントも指定できます(下記のコードで指定しているのは、Noto Sans JP)。

window.WebFontConfig = {
  google: { families: ['Noto+Sans+JP'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

複数のフォントウェイトの指定も可能。

window.WebFontConfig = {
  google: { families: ['Roboto:400,500,700'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

カンマ , で区切れば、2 つ以上の Google Fonts も指定できます。

window.WebFontConfig = {
  google: { families: ['Roboto:400,500,700', 'Noto+Sans+JP'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

指定するフォント名は、HTML で呼び出す際のコードを参考にします。

例えば、普通に Noto Sans JP を読み込ませる場合には、下記の HTML を使います。

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

https://fonts.googleapis.com/css?family= の後の Noto+Sans+JP が使用するフォント名です。

そのままコピペをすれば OK 。簡単です。

ちなみに、Material icons も、Web Font Loader を使い非同期で読み込めます。

window.WebFontConfig = {
  google: { families: ['Material+Icons'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};
以下同じ

アーリーアクセス版の読み込み方法

2016 年 10 月から 9 種類のフォントが公開されているのが、アーリーアクセス版の Google Fonts 日本語

このうち、「はんなり明朝」「こころ明朝」「ニコモジ」「ニクキュウ」の 4 つのフォントは、正式版では提供されていません。

この 4 つのアーリーアクセス版のフォントを使う場合も、Web Font Loader を利用できます。

ただし、正式版とアーリーアクセス版は URL が異なるため、ほんの少し手間が増えます。

ニコモジを読み込む場合のコードは、下記のとおりです。

window.WebFontConfig = {
  custom: { families: ['Nico Moji'],
            urls: ['https://fonts.googleapis.com/earlyaccess/nicomoji.css'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

正式版の Google Fonts は、google: { families: [] } でフォント名を指定します。

一方、アーリーアクセス版のフォントは、custom: { families: [] } でフォント名を指定します。

フォント名は、CSS の font-familyNico Moji を使います。

HTML で呼び出すコード内の nicomoji で指定すると、読み込み速度が大幅に低下します。これは、その他のアーリーアクセス版フォントでも同様です。

HTMLの nicomoji は使わない
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

さらに、3 行目の urls: [] で URL の指定が必要です。

正式版とアーリーアクセス版を同時に読み込ませる方法

正式版とアーリーアクセス版の Google Fonts は、同時に読み込めます。

window.WebFontConfig = {
  google: { families: ['Roboto:400,500,700', 'Noto+Sans+JP'] },
  custom: { families: ['Nico Moji'],
            urls: ['https://fonts.googleapis.com/earlyaccess/nicomoji.css'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

google: { families: [] }custom: { families: [] } も指定します。

CSS で font-family を指定

あとは、CSS の font-family を指定すると、Google Fonts を表示できます。

body {
  font-family: 'Roboto', sans-serif;
}

Noto Sans JP を使う場合には、この指定方法がおすすめです。

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

Noto Sans JP より Noto Sans CJK JP を優先して表示する指定です。

おすすめの理由は、Android と Chrome OS のシステムフォントに Noto Sans CJK JP が採用されているため。

ローカルにあるフォントファイルを使うことで、フォントが素早く表示されます。

しかも、Noto Sans JPNoto Sans CJK JP は、書体がほぼ一緒です。

書体の違いに気付く方は、そういらっしゃらないと思います。

FOUT(ちらつき)を CSS で制御

Google Fonts に限らず、Web フォントを非同期で読み込む際には、FOUT と呼ばれるちらつきが生じます。

FOUT とは下の動画のように、フォントが途中で変わる現象です。

この FOUT が起きる原因は、Web フォントの読み込みが完了するまで、スタイルが適用されていないテキストが表示されるためです(動画では、動画撮影に使った Chromebook のローカルフォント Noto Sans CJK JP が最初に表示されている)。

そして、読み込みが完了すると Web フォントに変わります(動画では、読み込んだ Sawarabi Mincho に変わっている)。

さらに日本語の Web フォントは、フォントの切り替わりに少しタイムラグが生じます(切り替わり時に一瞬テキストが消える)。

Web Font Loader は、この FOUT の対策も可能です。

Web Font Loader は、フォントイベントに対応したクラス名を <html> タグに追加します。

追加されるクラス名のうち、CSS で主に利用するのは下記のものです。

  • .wf-loading:フォントを読み込み中の時
  • .wf-active:フォントの読み込みが完了した時
  • .wf-inactive:フォントの読み込みに失敗、またはブラウザが Web フォントに対応していない時

他にフォント毎に追加される 3 つのクラス名もありますが、CSS ではあまり使わないため省略しています。詳しくは GitHub 内の Events をご覧ください。

この <html> タグに追加されるクラス名を使い、CSS を指定します。

h2 {
  font-family: 'Sawarabi Mincho';
  visibility: hidden;
}

.wf-active h2 {
  visibility: visible;
}

上記の CSS は h2 の見出しに Sawarabi Mincho を指定し、まずは非表示にしています。ただし、display: none; での非表示ではないため、レイアウトは崩れません。

フォントの読み込みが完了し .wf-active のクラス名が <html> タグに追加されると、visibility: visible; で h2 を表示しています。

この CSS を指定すると、下の動画のように表示されます。

Web フォントの読み込みが完了するまでテキストは表示されないため、フォントが切り替わりません。

この CSS での FOUT の制御は、Adobe のフォントイベントが紹介している方法です。

ただし、この方法は、意図的に FOIT を発生させるものです。

FOIT
最初はテキストが表示されず、Web フォントの読み込み後に突然テキストが表示される現象

FOUT より FOIT を嫌う方は多いため、どうしてもローカルフォントでの表示を避けたい箇所でのみの使用がいいかもしれません。

例えば、サイトタイトルに独特の Web フォントを使っている場合は、そのフォントがブランディングに一役買っているはずです(Instagram が代表格)。そのような場合は、ローカルフォントでの表示は避けるべきかもしれません。

また、ボトムナビのような重要なボタンに、Material icons を使っている場合も同様です(アイコン以外の表示は、明らかに好ましくない)。

もっと細かく FOUT を制御

Adobe は、より細かく CSS を指定する方法も紹介しています。

例えば、こんな感じです。

h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  letter-spacing: 1px;
  position: relative;
  top: 2px;
}

.wf-active h2 {
  font-family: Vollkorn, serif;
  font-size: 24px;
  letter-spacing: 0;
}

.wf-active h2 に、最終的に表示する Google Fonts の Vollkorn を指定しています。

それに加え h2 に、Vollkorn が読み込まれるまで Georgia を表示するよう指定しています。さらにフォントサイズや字間、位置も調整。

この指定をすると、下記の動画のように FOUT を抑えることが可能です(完全に制御すると動画で判別できないため、FOUT が分かるようにしています)。

読み込みたい Web フォントに似たフォントを最初に表示することで、FOUT を抑えます。

似たフォントを探す手間がかかりますが、テキストは瞬時に表示したい場合に適しています。

おわりに

Google Fonts はサイトにアクセントを加えてくれますが、サイト速度を犠牲にしては利用者を失望させます。

Web Font Loader を利用すれば、美しさも速さも両立できるはずです。

また、<link rel="preload"> での読み込みとは違い、IE に対応できるのも魅力的です。

ちなみに、@import を使い CSS で Web フォントを読み込むのは、絶対におすすめできません。ものすごくサイト表示が遅くなります。

コメント

  1. お世話になります。
    大変分かりやすい記事で参考にさせていただいております。

    「Google Fonts 日本語を読み込ませる方法」を試してみたのですが、
    urls: で指定した CSS読み込み先の外部リンク 部分が、レンダリングをブロックしてしまうようです。
    尚、利用フォントは ‘Sawarabi Mincho’ですので、ご提示コードの一部を以下のように置換えて子テーマのheader.phpに入力しています。

     custom: {families: ['Sawarabi Mincho'],
     urls: ['https://fonts.googleapis.com/earlyaccess/sawarabimincho.css'] },

    私の環境では、テーマをSimplicity2、キャッシュ系プラグインにAutoptimize、そしてCDNを利用していますが、確認及び補足対応が必要と考えられる事はありますでしょうか?  キャッシュは削除しています。
    大変お手数ながら、ご指南頂けましたら幸いです。どうぞ宜しくお願い致します。

    • テスト環境の Simplicity2 に Autoptimize をインストールして試してみました。

      コードは、むーらんさんがお書きになったものと全く同じです。

      結果は、 WebPageTest でも PageSpeed Insights でも、レンダリングブロックを確認できませんでした。

      下のリンクは WebPageTest の計測結果の画像です。

      WebPageTest の計測結果

      背景が緑色部分がレンダリングをブロックしているリソース、紫色部分が非同期で読み込まれているリソースです。さわらび明朝は、非同期で読み込まれています。

      Autoptimize を無効にしても非同期で読み込まれていたので、怪しいのは CDN のような気がします。

      CDN を無効にされると、レンダリングブロックは解消しないでしょうか。

      また、 Simplicity であれば、コードは header.php ではなく、子テーマの javascript.js にお書きになってもいいかもしれません。今回私は javascript.js にコードを追加しました。

  2. Akira様

    お世話になっております。
    コメント頂きました通りで子テーマの javascript.js に書き直し、CDN を再度キャッシュパージしましたら、上手くいきました。
    お忙しい中、ご丁寧なアドバイス並びにお手間を賜り、誠に有難うございました。

    • 上手くいったようで良かったです。

      ご不明な点がございましたら、ご遠慮なくお尋ねください。

  3. Akira様
    高速化されたGoogleWebFontsの導入法のわかりやすい解説ありがとうございます。
    無事、自ブログの方が高速化され、悩まされていたページ表示速度の問題が解決しました。

    ところで、ひとつ質問をよろしいでしょうか?

    私のブログではGoogleWebFontがページによって、反映されるているページ、反映されていないページが何故かあります。

    考えられる原因についておわかりになりますか?

    特に、一問一答形式のWeb診断表のページに至ってはレイアウトまでも崩れています。
    (他のページはFontが反映されていないだけです。)

    Twentyseventeenの子テーマを使用しています。

    以下、header.phpとstyle.css、javascript.jsです。
    ——————————————————————————————————————————
    ①//header.php//

    /* noto-sans-jp-regular-japanese */
    @font-face {
    font-family: ‘Noto Sans JP’;
    font-style: normal;
    font-weight: 400;
    src: local(‘Noto Sans Japanese Regular’), local(‘NotoSansJapanese-Regular’),
    url(‘https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */}

    (※必要と思われる部分のみ記述しています。)
    ——————————————————————————————————————————
    ②//style.css//
    /* ブログ内のフォント */
    body {
    font-family: ‘Noto Sans JP’, sans-serif;
    }
    (※必要と思われる部分のみ記述しています。)
    ——————————————————————————————————————————
    ③//javascript//
    window.WebFontConfig = {
    google: { families: [‘Noto+Sans+JP’] },
    active: function() {
    sessionStorage.fonts = true;
    }
    };

    (function() {
    var wf = document.createElement(‘script’);
    wf.src = ‘https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js’;
    wf.type = ‘text/javascript’;
    wf.async = ‘true’;
    var s = document.getElementsByTagName(‘script’)[0];
    s.parentNode.insertBefore(wf, s);
    })();
    (※必要と思われる部分のみ記述しています。)
    ——————————————————————————————————————————

    よろしければ、ご指南いただけると幸いです。
    ご迷惑おかけします。

    • コメント欄では WordPress が削除したので確認できませんが、通知が来た Gmail では「 preload を指定する」とお書きになったのが見えます。

      また、Web Font Loader では不要な @font-face でフォントを読み込まれています。

      もし、preload で先読みしていらっしゃるのなら、preload と Web Font Loader はどちらか 1 つだけをご選択ください。

      記事冒頭の注意書きが、誤解を生んだように思えます。申し訳ありません。注意書きを修正しました。

      サイトスピードは preload の方が速くなるので、preload でよろしければ Web Font Loader を削除します。

      IE などでも非同期で読み込まれたい場合には、Web Font Loader を残し preload や @font-face を削除します。

      > 一問一答形式のWeb診断表のページに至ってはレイアウトまでも崩れています。

      これはサイトを拝見しないと、原因が分かりません(拝見しても分からないかもしれません)。

      フォントの読み込みでレイアウトが崩れることは、普通は起こりません。

      HTML の閉じタグがない、CSS の閉じカッコやセミコロンがない、PHP エラーが出ているなどが原因かもしれません。

  4. Akira様
    お忙しい中、回答ありがとうございました。

    もし、preload で先読みしていらっしゃるのなら、preload と Web Font Loader はどちらか 1 つだけをご選択ください。
    記事冒頭の注意書きが、誤解を生んだように思えます。申し訳ありません。注意書きを修正しました。
    >preloadとWeb font Loaderは併用するものかと勘違いしていました。
    プログラミングの知識は、せいぜいネットで拾った情報で
    自分のサイトに活用していく程度しかないので、初歩的な質問をしてすみませんでした。

    フォントの読み込みでレイアウトが崩れることは、普通は起こりません。
    HTML の閉じタグがない、CSS の閉じカッコやセミコロンがない、PHP エラーが出ているなどが原因かもしれません。
    >そうなのですね。preloadとweb font loaderを併用するというわけのわからないことを
    やっているうちにCSS等が崩れたのかもしれません。

    もう一度トライしてみます。
    お忙しい中、ご回答どうもありがとうございました。

    • 再度、TO さんのコメントを見返すと、header.php に追加されている @font-face に 1 ヶ所誤りがありました。

      @font-face の src がカンマで終わっています。

      src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'),
           url('https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2') format('woff2'),

      おそらく、これがレイアウトが崩れた原因です。

      カンマをセミコロンに変更されると、レイアウト崩れは直らないでしょうか。

      src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'),
           url('https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2') format('woff2');
  5. Akira様

    丁寧な返信ありがとうございます。

    Googleフォントの件は何度試してみても@import以外の方法ではうまくいかないので、とりあえず保留にしています。(前回、webfontloaderとpreload指定の併用でGoogleフォントが適用された原因は、CSSに@importがあったのか、キャッシュが保存されていたかのどちらかだったようです。一晩したら、Googleフォントが適応されなくなっていたので、おそらく原因は後者だと思われます。)

    非同期読み込みの方法は、私のサイトの場合、サーバーに置いたwoff2ファイルが常に文字化けしており、うまくWebFTP(エックスサーバーのもの)が文字エンコード等で対応していないのかと思います。(単に私のブラウザが対応していないだけかもしれませんが・・・)

    fontファイル上に.htaccessファイルを置き、クロスドメイン禁止解除コードを書いたり色々とネットで調べられる対策法を講じてましたが、解決しませんでした。

    もしかしたら、導入中の何らかのプラグインが邪魔をしているのかもしれません。
    とりあえず、今後、時間が空いた時に、この問題の解決を図りたいと思います。

    どうもありがとうございました。

    • 基本的なことを 1 つ 1 つ確認されるのがいいと思います。

      例えば、preload で先読みされる場合の @font-face のフォントファイルのパスは正しいでしょうか。

      このようにお書きになっていますが…

      https://example.com/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2

      こうではありませんか?

      https://example.com/wp-content/theme/twentyseventeen-child/fonts/noto-sans-jp-v18-japanese-regular.woff2
  6. 初めまして。
    私もホームページを制作しており初めはメイリオなど軽いその後使いたいフォントに変換しようと考え
    Akiraさんの手法を用いさせて頂きました。ありがとうございます。
    そこで質問なのですが初めてHPを開いた際にはこの手法、その後ページを進む際には最初から希望のフォントで表示させたいのですが可能でしょうか。
    よろしくお願いいたします。

    • 申し訳ありません。ご質問の意図が分からないため、何とも言えません。

      CSS で FOUT を抑える方法をおっしゃっているのでしょうか?

  7. Akira様

    サイトの速度改善でたくさんの有用な記事を参考に導入させて頂いております。
    今回記載の方法でnoto fontをweb font loaderで読込させて表示させようとしております。
    以下が該当の部分になります。
    ====js====

    window.WebFontConfig={google:{families:["Noto+Sans+JP:400,700&subset=japanese"]},active:function(){sessionStorage.fonts=true}};(function(){var a=document.createElement("script");a.src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js";a.type="text/javascript";a.async="true";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

    =========
    ====css====

    html {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;}
    body {font-family:'Noto Sans JP','Noto Sans CJK JP', "Noto Sans CJK JP Subset","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; }

    =========
    FOUT対策としてcssはhtmlでヒラギノやメイリオのデフォルトフォントを読み込ませ、
    bodyでNotoフォントを読み込ませています。

    chrome、firefoxは表示に問題ないのですが、iPhone、safari、ie11だとデフォルトフォントが表示されてしまいNotoフォントに変換されませんでした。

    上記の原因と解決法がわかればご教示いただけますと幸いです。

    • 私の環境では、IE で正常に表示できます(Safari では試していません)。

      お書きになった内容を拝見する限り、CSS が原因かもしれません。

      FOUT の制御には、Web Font Loader が html タグの class に追加する wf-active を使います。なので、このようにお書きになればいいように思えます。

      body {
        font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, sans-serif;
      }
      
      .wf-active body {
        font-family: 'Noto Sans JP', sans-serif;
      }

      "Noto Sans CJK JP Subset" もお書きになっていますが、ご自身でサブセットしたフォントも読み込まれているのでしょうか?ちょっと分からないので、この部分は無視しました。

  8. Akira様

    ご確認頂き誠にありがとうございました。
    どうやらgoogle fontはieのサポートが終了され非対応になったようでした。
    おそらくAkira様のローカルにNoto fontを所持しているため表示が問題なかったのかと思います。
    (私はMacはNotoあり、WinはNotoなしで確認しておりまして表示がうまくされませんでした。)

    またAkira様のご推察の通り、”Noto Sans CJK JP Subset”はサブセットのNotoを読み込ませておりましたので
    ieはローカルを読み込み、その他はWeb Font Loaderを読み込ませるようにし対応しました。

    このたびはご相談にご対応いただき誠にありがとうございました。

    • ①「どうやらgoogle fontはieのサポートが終了され非対応になったようでした。」

      それは下記リンクに記載の Google Fonts 日本語のアーリーアクセス版のことではないでしょうか。

      IE11でGoogleフォント「Noto Sans JP」が表示されなくなった。

      TAK さんが読み込まれているのは正式版です。正式版は WOFF2 に対応しているブラウザには WOFF2 で、WOFF2 に未対応のブラウザには対応するファイル形式で読み込みます。そのため、IE でも Google Fonts を表示できます。

      参考サイト:「Google Fonts」にWOFF2以外のフォントをリクエストする方法

      ②「おそらくAkira様のローカルにNoto fontを所持しているため表示が問題なかったのかと思います。」

      私の Windows にも Noto 系のフォントファイルは入っていません。また、InPrivate ブラウズで確認したので、ブラウザのキャッシュからフォントを読み込んだわけでもありません。

      ③CSS がおかしい

      先のコメントで書いたとおり、CSS がおかしいです。

      FOUT 対策のために、html と body に font-family を指定されているとお書きになっています。しかし、それではフォントファイルの読み込みに関係なく、html に指定した font-family を body に指定した font-family で上書きするだけです。

      この記事に書いている CSS での FOUT 対策は、.wf-active での指定が必須です。

      IE や Safari で上手く表示できない理由は、私の憶測ではこんな感じです(サイトを拝見していないため、あくまで憶測)。

      1. ブラウザが CSS を適用する時点で、まだ Web Font Loader が実行されておらず、Google Fonts のフォントファイルが読み込まれていない。
      2. フォントファイルが読み込まれていないため、body の font-family に指定した Noto Sans JP が適用されない。
      3. 適用されるのは、ローカルにファイルがある ヒラギノ角ゴ Pro W3 以降のフォント。

      Chrome や Firefox で上手く表示できるのは、この 2 つのブラウザの処理速度が速いためではありませんか?

  9. はじめまして。突然のメッセージすいません。
    わかりやすい説明ありがとうございます。記事の通りするとかなり読込速度が改善されました。

    筆者さんに聞いてよいのかわからないのですが、IEでフォントが適応されない現象が起きるのですが、こちら改善方法はおわかりになりますか?

    ■記述例

    google: { families: ['Noto+Sans+JP:400,500:japanese','Josefin+Sans:600','Roboto:500'] },

    もしくは、

    google: { families: ['Josefin+Sans:600','Roboto:500','Noto+Sans+JP:400,500&subset=japanese'] },

    よろしくお願いいたします。

    • 根本的な原因が分かりませんが、日本語フォントと英語フォントを同時に読み込むと、日本語フォントが IE で反映されませんでした。

      ただ、日本語フォントを custom で読み込むと反映されました。

      window.WebFontConfig = {
        google: {
          families: ['Josefin+Sans:600', 'Roboto:500']
        },
        custom: {
          families: ['Noto Sans JP'],
          urls: ['https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500&display=swap&subset=japanese']
        },
        active: function() {
          sessionStorage.fonts = true;
        }
      };

      日本語フォントのみを読み込む場合は反映されるので、謎です。

  10. なるほどです!
    ありがとうございます。
    IEでの表示も確認できることができました!!さすがです!!

  11. Akira様
    とてもわかりやすい解説ありがとうございます。
    さっそくサイトに適用させたのですが、Edgeでの表示がうまくいかずに困っております。
    Webフォントがきちんと表示されたり、されなかったりと不安定な状態です。
    特定のページによるものでもありませんでした。また、Edge以外のブラウザは問題ありません。
    Edgeのキャッシュと webfontloader.js の相性が悪いのか・・・原因究明もできない状況です。
    よろしければ、ご指南いただけると幸いです。
    よろしくお願いいたします。

    • 申し訳ありません。お書きになられている情報だけでは、原因が分かりません。

      ただ、私であれば、2 つのことを試します。

      1 つ目は、ブラウザのキャッシュの削除です。

      2 つ目は、CSS の変更です。例えば、このように書き、Web フォントはフォントファイルが読み込まれたら適用するようにします。

      body {
        font-family: ローカルのフォント名を書く;
      }
      
      .wf-active body {
        font-family: Webフォント名を書く;
      }

      これで解決しない場合は、サイトを拝見するか、お書きになったコードを確認しないと原因が分かりません。

  12. Akira様
    早々のお返事、ありがとうございます。
    いただいた2点はすでに確認済みでした。
    情報が不足していることは理解しています。申し訳ありません。
    一度、環境を変えて試してみます。

    • 解決方法をご提示できず申し訳ありません。

      尚、私の環境では Edge でも表示されます。

      「きちんと表示されたり、されなかったり」と表示されるケースもあるようですので、デベロッパーツールのコンソールで何かしらエラーが出るケースがないかお調べになるのがいいかもしれません。

  13. 私が運営しているサイトが、PageSpeed Insightsでモバイルのスコアが1と、致命的な状況でした。
    画像圧縮、画像の遅延ロード、YouTubeやヒートマップなど外部スクリプトの排除などなど
    さまざまな対策を施したのですが、スコアがずっと1から変わりませんでした・・・。

    もうダメかなと諦めかけていた時に、こちらの記事を拝見して、本当に救われました。
    Web Font Loaderを実装してみたら、1から一気に16まで上がりました!
    本当にありがとうございました。

    文章も読みやすいし端的で理解しやすかったですし
    デザインも素敵で細かな部分までこだわりも感じました。見習いたいです。

    • お役に立てたようで幸いです。

      スコアが低い原因は、スタイルシートや JavaScript ファイルのレンダリングブロックかもしれません。

      また、画像の遅延ロードは、実装方法を誤ると逆にサイトが遅く重くなるので注意が必要です。正しい実装方法は、下記の 2 つです。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。