フォントの読み込み完了を検知する

TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adobe Blankのサイズ削減 Adobe Blankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobe Blankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加 外部リクエストにすると意味が薄れるのでDa

[field_combat]

Adobeの表示がないフォントを先に読み込ませて、ダミー要素の幅を監視する。

[yasu-log]

［B!］フォントの読み込み完了を検知する - Weblog - hail2u.net

[securecat]

にゃるへそ

[korinchan]

FOUTというのか。

[typista]

フォントの読み込み完了を検知する

[bleu-bleut]

FOUT対策、Webフォント読み込み完了を検知するハック。「a」だけのAdobe Blankのサブセットを作成し、DataURIで"CSSに混ぜ込む"。

[warriorking]

フォントの読み込み完了を検知する - Weblog - http://t.co/BIvIiK7pwr

[kojika17]

フォントの読み込み完了を検知する - Weblog - http://t.co/IdyeIjzC0J

[raimon49]

offsetWidthを監視して読み込みの完了を検知

[efcl]

WebFontをロード完了を検知する方法

[ysakmrkm]

フォントの読み込み完了を検知する - Weblog - http://t.co/DKCnUhT8M6

[oppara]

フォントの読み込み完了を検知する - Weblog - http://t.co/rTKa2vbIBv