Google Fontsで学ぶWebフォントの基本
- カテゴリー
- CSS >
- Webフォント／アイコンフォント
全5回
Google Fontsを例にWebフォントの仕組みを基礎から解説します。また、Next.jsを例にWebフレームワークでWebフォントがどのように扱われているかも押さえましょう。
最終回 next/font/googleの詳細設定
next/font/googleのpreloadとsubsetsオプションの関係、「日本語フォントなのにlatinサブセット？」という疑問への回答、そして日本語WebフォントをNext.jsで扱う際の設計判断について解説します。
第4回 next/font/googleの基本動作
Next.js組み込みのフォント最適化モジュールnext/font/googleを取り上げます。Next.jsがWebフォントの読み込みに介入する理由と、基本的な使い方、自動最適化の仕組みについて解説します。
第3回 font-displayとフォント読み込み中の表示
Webフォントの読み込み中にテキストがどう表示されるかを制御するfont-displayプロパティについて、FOIT/FOUTの概念と併せて解説します。
第2回 preconnectとCORSを理解する
Webフォントの読み込みを最適化するpreconnectの仕組みと、フォントに必須のCORS・crossorigin属性について解説します。
第1回 Webフォントが表示されるまで
まずはGoogle Fontsを例にWebフォントがどのように読み込まれ、ブラウザのページ上に表示されるのか、その過程を追ってみます。