Google Fontsで学ぶWebフォントの基本
- カテゴリー
- CSS >
- Webフォント／アイコンフォント
全4回
Google Fontsを例にWebフォントの仕組みを基礎から解説します。また、Next.jsを例にWebフレームワークでWebフォントがどのように扱われているかも押さえましょう。
第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フォントがどのように読み込まれ、ブラウザのページ上に表示されるのか、その過程を追ってみます。