最近はWeb Fontを使うサイトが増えてきました。ロゴとして使うケースもありますが、その多くはアイコンフォントとして使っているようです。アイコンフォントの場合、Web Fontの読み込み前や読み込みに失敗すると四角が表示されてしまうのが難点です。 アイコンとテキストであればまだいいですが、アイコンだけを使っている場合はその意味するところが分からなくなってしまいます。そこで使ってみたいのがjQuery-FontSpy.jsです。

jQuery-FontSpy.jsの使い方

こちらがデモ画面。

DevToolsを見ると読み込み失敗が分かります。

jQuery-FontSpy.jsはWeb Fontの読み込み成功、失敗を検知できるソフトウェアになります。読み込みに失敗したら、その場所は代替画像を表示すると言った処理に切り替えることもできるでしょう。読み込み失敗しても致命的なエラーにならないからこそあらかじめ準備しておきたいソフトウェアです。

jQuery-FontSpy.jsはjQuery/JavaScript製のオープンソース・ソフトウェアです。

jQuery-FontSpy.js patrickmarabeas/jQuery-FontSpy.js · GitHub