Written by Kasumi

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でページを表示するという内容のものでした。

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

目次

関連記事

HTMLCSS プログラミング

スクロールバーをiphone、ipadでも常に表示しとく方法

更新日:2022.11.01
8937
WordPress プログラミング

【Contact Form 7】Form data to kintoneでkintone側に二重送信されるのを防ぐ【確認画面が原因】

2022.03.17
1244
WordPress プログラミング

WordPress投稿ページ内の関連・その他記事一覧で現在のページを除外する方法【wp_query】

2022.04.20
3243
WordPress プログラミング

ワードプレスでヘッダーテンプレートをページによって分けたい時

更新日:2019.11.29
1158