2025/04/24 06:32 IKEA's Web Fonts
やあ、ロボ子。今日のITニュースはフォントの話じゃ。
フォントですか、博士。それはまた面白いテーマですね。
IKEAが長年使っていたFuturaフォントから、Verdana、そしてNoto Sansへと変遷してきた話じゃ。フォントにも歴史があるのじゃな。
FuturaはMacにデフォルトでインストールされているフォントだったんですね。でも、他のシステムだとArialにフォールバックしてしまうことがあった、と。
そうそう。そこでIKEAは2010年にVerdanaを採用したんじゃ。MicrosoftがWebフォントとして設計したもので、低解像度でも見やすかったからの。
Verdanaはラテン文字、ギリシャ文字、キリル文字しかサポートしていなかったため、タイや韓国などの非ラテン文字市場では、システムのデフォルトフォントを使っていたんですね。
そこで登場したのがGoogleのNoto Sansじゃ！すべての言語の文字をエンコードすることを目標としたフォントなのじゃ。
IKEAはNoto Sansをベースに、いくつかの文字を修正して、Noto IKEAという独自のバリアントを作成したんですね。
そう！そして、その変更された文字だけを含む小さなフォントをCSSにbase64エンコードして、デザインシステムのベーススタイルの一部として配布したんじゃ。
でも、ユーザーが他のサイトからNoto Sansのキャッシュコピーを持っていることを期待していたのが、Safariのキャッシュ戦略の変更でうまくいかなくなったんですね。
そうなんじゃ。しかも、Noto IKEAレイヤーがCSSに統合されていたから、サイトの読み込み速度が低下して、Google Fontsがダウンすると表示がおかしくなる問題も発生したんじゃ。
GDPRの問題もあって、IKEAはフォントをセルフホスティングに移行したんですね。DNSリクエストを削減して、フォントを特定のニーズに合わせて調整するために。
キャッシュを最大限に活用するために、サブセット化、チャンク化、機能削除を行ったんじゃ。すごいじゃろ？
言語固有のURLでフォント設定フラグメントをページにプルインするために、ESIなどのテクノロジーも使用しているんですね。
フォント自体は、WOFF2のみを標準化して、GoogleのNoto SansのUnicode範囲に基づいて、小さくダウンロードしやすいチャンクに分割したんじゃ。
スラッシュ付きゼロ、等幅数字、発音区別符号の位置に関する機能を除き、可能な限り多くのフォント機能を削除したんですね。
ラテン文字と少数の発音区別符号のみを使用するページの場合、ユーザーは約2KBのCSSファイルと約24KBのフォントをダウンロードするだけで済むんじゃ。
フォントプロジェクトはIKEAのデザインシステムチームが所有していて、内部の誰でも貢献できるinnerSourceプロジェクトなんですね。
サブセット化システムはsubset-fontの上に構築されていて、HarfbuzzのWebAssemblyビルドを使って、Node環境でサブセット化機能を提供しているんじゃ。
Playwrightを使って、視覚回帰テストのためにデモページをフックし、GitHubアクション経由でmacOSランナーで実行しているんですね。
IKEAは可変フォントもテストしたけど、ファイルサイズの改善が見られなかったから、採用を見送ったんじゃ。
中国、韓国、日本などの市場では、数万の文字が使用される可能性があるため、フォントを小さなチャンクに分割しているんですね。
CJK市場ではIKEA固有の変更がないから、Noto SansをGoogleから直接ロードしているんじゃ。
Googleは、URL内のセミコロンを2つのドットに置き換えることで、可変フォントバージョンを提供し、CSSサイズを削減しているんですね。
IKEAは、CJK市場でのDNSルックアップを削除するために、CJKフォントチャンクを自社で配布することなどを検討しているんじゃ。
フォントの最適化、奥が深いですね。IKEAの努力に感心しました。
じゃろ？ところでロボ子、IKEAの家具組み立て説明書って、フォント以外にも色々工夫されてるって知ってたか？
え？そうなんですか？
絵だけで説明してるところとか、実は言語依存を避けるための工夫らしいぞ。…って、フォントの話から脱線しすぎたかのじゃ？
博士、最後に一つ質問です。IKEAで一番好きな家具は何ですか？
そりゃあ、もちろん…組み立てる前の状態の家具、じゃ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。
