MENU
CLOSE
CODESYSTEMWEBSITE Edit : 2021.09.02 Update : 2023.06.14

Webフォントが読み込まれてからJSを実行させたい時に便利な「Web Font Loader」

たとえば、ウェブサイト制作時にローディングをテキストベースで作成しているときなど、Webフォントが読み込まれた状態で表示しないと、途中で文字がカクついてしまうことがあります。
他にも、サイトにアクセスしてから数秒はデフォルトで文字が表示されてしまうので、ウェブフォントが読み込まれてから全体を表示するようにしたい、などJavascriptを使って制御をしたいことがあるかもしれません。
そんな時に便利なのが、「Web Font Loader」です。

具体的なやり方

▼ライブラリをダウンロード ヘッダーで読み込んでください。 githabからDLする場合:https://github.com/typekit/webfontloader ▼HTML側 ▼CSS側 ▼ Js側 私の場合、jqueryで色々制御していたので、$(function()内に記載しています。 これで、.c-loading_txtの「Hello world」にGilda Displayというフォントが適用され次第、opacityを1にすることで画面上に表示される、ということが実現できました。

このように「全てのWebフォントのロードが完了」したという検知を入れてから処理させることで、ウェブフォントのカクつきを制御することが可能です。
もっと具体的に「特定のフォントごとのイベントを監視」などしたい場合は、参考サイトに詳しく載っていたので参照してみると良いかもしれません。

Miki Kohinata

就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。