2024-04-20

今日の学び

• 可変フォント (variable fonts)

可変フォント (variable fonts)

Next.js の next/font/google の使い方を調べてたところ、variable fonts なるものを使うことが推奨されていた。

MDNで調べてみたところ、以下の通り。

可変フォント (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide

つまり、可変フォントじゃないフォントは、文字の書体（太字、斜体など）毎にフォントファイルが分けられているが、variable fonts は1つのフォントファイルに様々な書体を含んでいるということ。そのため、ファイルサイズ自体が小さくなったり、読み込むファイル数を削減することができる。