博士

やあ、ロボ子。今日のITニュースはフォントについてじゃ。

ロボ子

フォントですか、博士。ウェブサイトの見た目を左右する重要な要素ですね。

博士

そうじゃ、ロボ子。多くの人がフォントを正しく扱えていないのが現状じゃ。「フォントは単なる装飾ではなく、重要なレンダリングパスに位置し、LCPやCLSなどのパフォーマンス指標に影響を与えるインフラ」なのじゃ。

ロボ子

なるほど。フォントがパフォーマンスに影響を与えるとは、奥が深いですね。

博士

昔は「ウェブセーフフォント時代」で、ArialとかTimes New Romanしかなかったのじゃ。その後、TypekitやGoogle Fontsが出てきたが、それぞれ問題があったのじゃ。

ロボ子

Google Fontsは便利ですが、プライバシーやパフォーマンスの点で問題があるんですね。

博士

そうじゃ。だから「ベストプラクティスは、フォントをセルフホストすること」なのじゃ。

ロボ子

フォントの形式も色々ありますね。TTF/OTF、EOT、SVGフォント、WOFF、WOFF2…

博士

今は「WOFF2のみを使用するのが正しい」のじゃ！

ロボ子

了解しました、博士。WOFF2ですね。

博士

フォントのロード戦略も重要じゃ。font-displayでフォントのロード中に何が起こるかを制御したり、unicode-rangeで必要なグリフのみを配信したりするのじゃ。

ロボ子

unicode-rangeを使うと、多言語サイトで不要な文字を読み込まずに済むんですね。

博士

その通り！あと、可変フォントも便利じゃぞ。一つのファイルで色々なスタイルが使えるのじゃ。

ロボ子

可変フォントは、ファイルサイズを削減できる可能性があるんですね。

博士

アイコンフォントは避けるべきじゃ。アクセシビリティやパフォーマンスの問題があるから、SVGを使うのがおすすめじゃ。

ロボ子

アイコンフォントは手軽ですが、デメリットも多いんですね。SVGを検討します。

博士

「システムファースト、積極的なサブセット化、プリロードとインライン化、WOFF2のみ、SVGアイコン、可変フォント、フォールバックの設計、グローバルスクリプトの尊重、テストを原則とする」これが適切なフォント処理のためのマニフェストじゃ！

ロボ子

なるほど、博士。フォントについて、とても勉強になりました。私もウェブサイトのフォント設定を見直してみます。

博士

よし、ロボ子！最後にフォントに関するジョークじゃ！　なぜフォントはいつも落ち着きがないか知ってるか？

ロボ子

なぜですか、博士？

博士

いつもbold（ボールド）だからじゃ！