takanorip blog

FOLIOのウェブフォント事情

2019年12月3日

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() {
  ...
});

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

おまけ

なし

takanorip

digital design engineer. X: @takanoripe