• プログラミング

webフォント（google、adobe）の読み込み後にページを表示する方法

webフォント（google、adobe）を使っている。

webフォントの読み込みが遅く、違う代替えのシステムフォントが一瞬表示される。

webフォントの読み込みが完了してからページを表示したい。

本記事ではこのような悩みを解決。

実装方法について解説します。　

Web Font Loaderを読み込む

<!-- web font loader をCDNで読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    // font-familyを記述
    custom: {
      families: ['Noto Sans JP']
    },
    loading: function () {
      //console.log('webフォントのロードが開始');
    },
    active: function () {
      //console.log('webフォントのロードが完了');

    },
    inactive: function () {
      //console.log('webフォントのロードが失敗');
    }
  });
</script>

Web Font Loaderを使います。

CDNでWeb Font Loaderを環境に読み込みます。

googlefontを読み込む場合、上記コードを参考にJavaScriptを記述します。

familiesプロパティの値にgooglefontで使ってるfont-familyを記述します。

※Adobefontを使っていて、JavaScriptで生成されたwebフォント読み込み用のコードを環境に埋め込んでる場合、上記コードは必要ないです。

CSSを使ってwebフォント読み込み後にページを表示する

html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}

上記CSSを記述します。

以上でwebフォント読み込み後にページが表示されます。

まとめ

Web Font Loaderを使う事でwebフォントの読み込みが完了した後にhtmlタグにクラスが付与されます。

そのクラスが付与された際にCSSでページを表示するという内容のものでした。

以上で解説を終わります。