takanorip blog

Font Loading API の紹介

created at:

2018-12-03

tags:

    TOC

    これはウェブフォントアドベントカレンダー 4日目の記事です。

    これを使えば、ウェブフォントの読み込みを JavaScript から制御することができます。

    CSS の font-face を定義し操作すること、それらのロード状況を追跡すること、デフォルトの遅延読み込み動作をオーバーライドすることが可能です。

    IE と Microsoft Edge 以外のブラウザで動作します。

    Can I use... Support tables for HTML5, CSS3, etc
    _"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile…_caniuse.com

    使い方

    https://gist.github.com/takanorip/2e895488820caff942fc83a555e9acc3

    https://codepen.io/takanorip/embed/preview/JezmVZ?height=600&slug-hash=JezmVZ&default-tabs=js,result&host=https://codepen.io

    補足

    Abobe Fonts はこの API の Polyfill である webfontloader を使用しています。

    Google Fonts はユニコードサブセットをしており、ユニコードごとにダウンロードするフォントファイルが決まっています。
    そのため、この API を使用して制御することは難しいかもしれないです。

    その他のウェブフォント配信サービスはダイナミックサブセッティングを採用しているので、この API や webfontloader を使用して制御するのは難しいと思います。
    サービスによっては制御用のAPIを公開しているのでそちらを利用するのが良いと思います。(例:Typesquare)

    API References | TypeSquare
    _URL tag options enable you to change actions during loading a web font by adding parameters to typesquare.js which is a…_typesquare.com

    Share on Twitter