Astroでデザインとしての絵文字をフォントサブセットして利用する

Font Awesomeに衝撃を受けてこれさえあればリッチな見た目との様々なトレードオフとはおさらばだ！やったぜ！と盛り上がってしまった過去を持つ（インターネット老人会へ片足を突っ込んでしまってもいる）皆様、こんにちわ！

どうでもいい前置きはまあいいとして、大変わかりづらいであろうタイトルをまずは補足します。

つまり、Astroで、デザインの一部として絵文字（😣←こういうの）を用いるために、専用のフォントを使いデバイス間で表示を揃え、フォントのサブセット化を施しダウンロードサイズを小さくしたい、という話になります。

「Noto EmojiがiOSで表示されない問題を調査する【異体字セレクタ】」を参考にしながらやってみます。

NotoEmojiのZipから取り出したNotoEmoji~.ttfをWSL上のAstroプロジェクトにコピーします。

$ cd some_astro_project
$ cp /mnt/c/Users/~/Downloads/NotoEmoji-VariableFont_wght.ttf ./public/fonts/

pyftsubsetは「フォントファイルをサブセット化して軽量化したい #Python - Qiita」を参考に。

$ cat chars.txt
😀😱

$ pyftsubset ./public/fonts/NotoEmoji-VariableFont_wght.ttf --text-file=./chars.txt --layout-features='*' --flavor=woff2 --output-file=./public/fonts/NotoEmoji-VariableFont_wght.min.woff2

$ cat src/styles/global.css
~
@font-face {
  font-family: "Noto Emoji";
  src: url("/fonts/NotoEmoji-VariableFont_wght.min.woff2") format("woff2");
}

.notoEmoji {
  font-family: 'Noto Emoji', serif;
}
~

$ cat src/pages/index.astro
~
    <h1 class="notoEmoji">☺😀😗😱</h1>
~

※異体字セレクタ未適用

ブラウザーでの表示を確認すると、NotoEmojiのサブセット化で選択した絵文字「のみ」、NotoEmojiで上書きされていることが分かります。

肝心のファイルサイズは、サブセット化前が約２Mバイトに対し、サブセット化後は約３Kバイトと、実用的なサイズとなりました。

PS
ChatGPTに「😃をWebで使えるsvgに変換してください」的なリクエストをすると、以下のような感じのsvgを７８０バイトで返してくれました。

・・・
まあこれでもいいのかな・・・