takanorip blog

FOLIOのウェブフォント事情

created at:

2019-12-03

tags:

    TOC

    これはFOLIO Advent Calendar 2019 4日目の記事です。

    ウェブフォント?

    ウェブフォントって何?って人は僕の本を買いましょう。だいたい理解できます。

    誰でもつかえる!ウェブフォント実践マニュアル (技術の泉シリーズ(NextPublishing))
    _Amazonで大木 尊紀の誰でもつかえる!ウェブフォント実践マニュアル (技術の泉シリーズ(NextPublishing))。アマゾンならポイント還元本が多数。大木…_www.amazon.co.jp

    あと僕が福岡フロントエンドカンファレンスで発表した資料も読みましょう。

    https://speakerdeck.com/player/52163c144fdf460b819e0da9d4b2b473

    FOLIOで使ってるフォント

    ウェブフォント事情

    Noto Sans JPとOpen SansはGoogle Fontsを使用しています。以前は自前でサブセット&ホスティングしてましたが下記2つの課題がありGoogle Fontsを使うように切り替えました。

    Yaku Han JPは自前ホスティングしてます。

    storycap対応

    弊社はstorycapで画像回帰テストをしているんですが、フォントのロードを待つ必要があるのでFont Loading APIを使って待機してます。

    document.fonts.ready.then(function() {
      ...
    });
    

    (ネタがなかったので書いてみたけど、全然話が膨らまない…ふつうのことしかしてない…許して…)

    おまけ

    なし

    Share on Twitter