Webフォントがいつ読み込まれたかを判断したい場合は、WebFont Loaderを使おう

TypekitのようなWebフォントサービスでは... / Webフォントは読み込みが完了するまでテキストに... / 特にJavaScriptでUIを制御している場合...他...全11件

TypekitのようなWebフォントサービスではなく自前のWebフォントを使用する場合、フォントがいつ読み込まれたのかを判断することができません。

Webフォントは読み込みが完了するまでテキストに適用することができないため、一瞬違う書式のテキストが表示されたり、適用後にテキストの高さが変わってしまって、heightを指定している要素からはみ出すことがあります。

特にJavaScriptでUIを制御している場合は、Webフォントが読み込まれたかどうかをつかみたい場面に出くわします。その際に非常に便利なのが、GoogleとTypekitが共同で開発しているWebFont Loaderというライブラリです。

WebFont Loader - Google Web Fonts API - Google Code

http://code.google.com/intl/ja/apis/webfonts/docs/webfont_loader.html

使い方は簡単で、ほんの数行コードを書き足すだけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
<script type="text/javascript"> 
    WebFont.load({ 
        custom: {  
            families: [ 'QuicksandBook', 'QuicksandBold' ], 
            urls: [  
                'http://yetanotherwebfontprovider.com/Quicksand-fontfacekit/stylesheet.css' 
            ] 
        }, 
        loading: function() { 
            // ロードが開始されたとき 
        }, 
        active: function() { 
            // Web Fontが使用可能になったとき 
        }, 
        inactive: function() { 
            // ブラウザがサポートしていないとき 
        }, 
        fontloading: function(fontFamily, fontDescription) { 
            // fontFamilyのロードが開始されたとき 
        }, 
        fontactive: function(fontFamily, fontDescription) { 
            // fontFamilyが使用可能になったとき 
        }, 
        fontinactive: function(fontFamily, fontDescription) { 
            // fontFamilyをブラウザがサポートしていないとき 
        } 
    }); 
</script>