🫧

Google Fonts APIで可変フォント(variable font)を利用する

2024/01/04に公開

CSS

2024年に入って数日しか経っていない今日このごろのこと。

「Noto Sans JPの可変フォント版使いたい！！」となったので利用方法を探ってみたところ、
「.otfなどのフォントファイルをダウンロードして、事前にバンドルなどしておくタイプ」は見つかったものの、
「クライアントがCDNから直接ダウンロードするタイプ」の方法が見つからない。

試行錯誤の末、後者の方法が分かったので後に続く方のために記すことにしました。

※下記が唯一解ではないと思われますが、現時点でこれ以外に「シームレスな可変」になる方法を私は知らないです。他の方法をご存知の方は教えて下さい。

結論

<link>タグで読み込むにせよ、@import url('')でインポートするにせよ、指定するAPIエンドポイントは以下の通り。

https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900

末尾の:wght@100..900がポイントで、該当フォントに対してfont-weightで指定可能な範囲をここで宣言します。
(本題から逸れるのであえて&display=swapなど記載してませんが、適宜追加して下さい。)

解説

答えは全てここにありました。

~~ドキュメントは読みましょう。自戒を込めて。。。~~
※追記: よくよく考えたら、私はこちらは読んだ上でこの記事を書いている。ということは、そこにv2や可変フォントのことが書いてない方が不親切なのではという気がしてきた。

まずAPIのエンドポイントについて。

他の方の記事では(variable fontを前提としていない記事がほとんどですが)
https://fonts.googleapis.com/css?family=font+name
や
http://fonts.googleapis.com/earlyaccess/fontname.css
を叩いておりましたが、

https://fonts.googleapis.com/css2?family=Noto+Sans+JP
がvariable fontに対応したfonts APIのv2エンドポイントとのこと。(css2がポイント)

ただ、ここを叩けば:wght@の指定の如何によらず可変になるかというとそうではなく、私の環境では

指定しないとfont-weight: 400;でダウンロードされる(@importで叩いてるURLをブラウザで開くとcssの中身が見れます)
全指定した場合(:wght@100;200;300;400;500;600;700;800;900)でも、指定通り効く環境とそうでない環境がある
という感じで、特に2.は環境依存ということもあり原因究明には至らず。

その後、先に挙げた公式ドキュメントに記載のwghtの範囲指定の方法を見つけ、これによって2.で上手く行かなかった環境でも可変で動くことを確認できたとさ。

ちなみに1

:wghtの指定の方法によるダウンロードサイズの違いを確認してみたところ、

#	指定方法	サイズ
1	(指定なし=:wght@400相当)	31.3kB
2	:wght@100..900	31.3kB
3	:wght@100;200;300;400;500;600;700;800;900	277kB

となり、可変でダウンロードしない理由が見当たりません。

ちなみに2

可変が効いてる時のAPIエンドポイントのURLをブラウザで開くと、

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/notosansjp/v52/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.0.woff2) format('woff2');
  unicode-range: U+25ee8, U+25f23, ... //(以下略)

のような記載が続くのですが、この内font-weight: 100 900;という書き方が、variable fontに対応したcssの記述方法のようです。

参考：MDNのfont-weightのページ#可変フォント

結論

解説

ちなみに1

ちなみに2

Discussion