可変フォントを使う(HTML/CSS)

前書き

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

目次

  1. 和文フォント
  2. 英文フォント
  3. 参考

和文フォント

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";
フォント名 woff2
Inter.var 317KB
Inter-Regular 97KB

その他の英文フォント

Variable Fonts

Google Fonts

参考

次世代のフォント技術 バリアブルフォントの世界

バリアブルフォントをWebフォントとして使う

Wakamai Fondue, the tool that answers the question “what can my font do?”

関連記事

OSに標準搭載されている和文フォントを使う(HTML/CSS)

Webフォントを使う(エックスサーバー)

この記事は役に立ちましたか?
送信中
先頭に戻る
目次に戻る
ページの先頭に戻る