Web Font

トップページのsocial icon消してさみしくなったのでテキストアニメーションをいろいろ試したけど、あまりしっくりこず（実装時の経緯メモ）。Copilotにいろいろ聞いたら、font変えるのはどうか、という提案される。物は試しとフォント変えて遊んで、ひとまず Caveat を使ってみることにした¹。

ついでなので、web fontでいろいろ遊ぶ。

web fontは、@font-face の仕様が策定されたのが2008年で、2009年頃からウェブフォントサービスが登場して以降、徐々に普及した。ポイントは大きく2つ

1. 負荷を軽減する技術的手法の確立
   • 圧縮率の高いWOFF/WOFF2フォーマット
   • 任意の文字のみをロードするダイナミックサブセット
   • Variable Fontによるフォントファイルの集約
2. Google Fontsの公開

パフォーマンスがほぼ変わらなくてしかも無料、となったら使うに決まっている。

Variable Font

Variable Fontとは、従来は太さや幅などスタイルに応じて複数のフォントファイルを用意していたところを、1つのフォントファイルで複数のスタイルを表現できるようにした形式。 Adobe, Apple, Google, Microsoftの4社により、2016年9月に発表された²。

変数をどのように指定するのかについては、Mozillaのガイドが分かりやすかった。

可変フォントガイド - CSS: カスケーディングスタイルシート | MDN

 developer.mozilla.org

WeightとWidthの計算方法については、Microsoftのコンテンツが面白かった。

OpenType Font Variations overview (OpenType 1.9.1) - Typography

OpenType Font Variations overview (OpenType 1.9.1)

 learn.microsoft.com

お遊びデモ。ちなみにこれの上位互換がRoboto Serifのtesterページで試せる。

Roboto Serifはslantには対応してなくて、italicも別のファイルのため、傾斜を調整することはできない。GRADEはRoboto Serifのカスタム軸なので大文字。