可変フォントを使う（HTML/CSS）

2022.5.8公開（2022.5.12更新）
@HTMLコーディング
#フォント

前書き

可変（バリアブル）フォントは、文字の太さを区切りなく変更できるフォントです。
フォントによっては、文字の幅や傾きなども同様に変更できます。
可変でないフォントで文字の太さを変更する場合には、太さごとにフォントファイルを用意する必要がありますが、可変フォントを用意すれば、その一つで事足ります。

和文フォント

NotoSansJP

Noto Sans CJK Version 2.004をダウンロードして、WOFFコンバーターで変換して使用しています。

いろはにほへと
山高故不貴
ABCDE 12345

太さ


@font-face {
  font-family: "NotoSansJP-VF";
  src: url("path/NotoSansJP-VF.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
font-family: "NotoSansJP-VF";

フォント名	変換前	woff2 変換後
NotoSansJP-VF	9.37MB （ttf形式）	4.37MB
NotoSansJP-Regular	4.43MB （otf形式）	3.32MB

その他の和文フォント

MPLUS_FONTS

英文フォント

Inter

Inter-3.19をダウンロードして使用しています。

ABCDE abcde
12345

太さ

傾き


@font-face {
  font-family: "Inter var";
  src: url("path/Inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
font-family: "Inter var";