1. なぜWebフォントはGoogle Fontsが最初の選択肢なのか
Webサイトのタイポグラフィを決める際、最初に開くのがGoogle Fontsというデザイナーは多いはずです。1,500種以上のフォントが完全無料・商用利用可で使え、<link>タグ1行でWebに組み込める手軽さは他に比べる物がありません。
しかし「とりあえずNoto Sans JPを使う」で止まっているなら、まだGoogle Fontsの半分も活用できていません。この記事ではフォント選定の考え方から実装テクニックまで、実務で使える内容を解説します。
2. 知っておくべきGoogle Fontsの主要機能
① カテゴリーとフィルターで素早く絞り込む
1,500種以上あるフォントをすべて試すのは非現実的です。Google Fontsのフィルター機能を使うと、Serif・Sans Serif・Monospace・Handwriting・Displayのカテゴリー分類に加え、太さ（Weight）・文字の傾き・文字の幅でさらに絞り込めます。
特に日本語フォントは「Language」から「Japanese」を選択することで日本語対応フォントだけに絞り込めます。Noto Sans JP・Noto Serif JP・BIZ UDPGothicなど実用的な選択肢が揃っています。
② プレビュー文字列を変えてフォントを比較する
フォント一覧画面の上部にあるプレビューテキスト入力欄に実際のコピーを入力すると、全フォントのプレビューが同じ文章で表示されます。「ブランドのキャッチコピー」や「見出しで使う予定の文言」を入力することで、実際の文脈でのフォントの印象を比較できます。
③ 可変フォント（Variable Fonts）でファイルサイズを削減する
Interなどの可変フォントは、Thin〜Blackまでの全ウェイトを1ファイルで提供します。通常のフォントで400・500・700の3ウェイトを読み込むより、可変フォント1ファイルの方がファイルサイズが小さくなるケースが多く、表示速度とデザインの自由度を両立できます。
④ Figmaプラグインで作業を効率化する
FigmaのプラグインからGoogle Fontsを直接検索・適用できます。ブラウザとFigmaを行き来せずにフォントを試せるため、タイポグラフィの検討スピードが上がります。
3. 日本語フォント選びの実践基準
日本語Webサイトでよく使われるGoogle Fontsを、用途別に整理しました。
| フォント名 | 印象・特徴 | 向いている用途 |
|---|---|---|
| Noto Sans JP | 可読性が高く中立的 | 本文・UI・ほぼ全用途 |
| Noto Serif JP | 格調があり信頼感を醸す | 記事・ブランドサイト・見出し |
| BIZ UDPGothic | ユニバーサルデザイン設計で読みやすい | 本文・情報密度の高いUI |
| Zen Kaku Gothic New | スタイリッシュでモダン | ファッション・ポートフォリオ系 |
| Shippori Mincho | 繊細でエレガントな明朝体 | 高級感のあるLP・ブランドサイト |
選定の基本原則：迷ったら本文はNoto Sans JP、見出しに個性を出したい場合はZen系やShippori系と組み合わせる2書体構成がまとまりやすいです。
4. 【実践】パフォーマンスを落とさないフォント実装手順
Google Fontsは便利な反面、実装方法を誤るとページ速度の低下原因になります。以下の手順で実装することでパフォーマンスへの影響を最小限に抑えられます。
- 使うウェイトを最小限に絞る。 400と700だけで大半のデザインは成立します。必要なウェイトだけをGoogle Fontsから選択し、不要なウェイトは読み込まないことがパフォーマンスの基本です。
- preconnectを<head>の最上部に追加する。 <link rel="preconnect" href="https://fonts.googleapis.com"> と <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> を追加することでDNSルックアップを事前に行い、フォント取得が速くなります。
- display=swapを必ず指定する。 Google Fontsの埋め込みURLに&display=swapを追加すると、フォントの読み込み中はシステムフォントで表示し、読み込み完了後に切り替わります。フォント読み込みでテキストが非表示になるFOIT問題を防ぎます。
- 日本語フォントはサブセット化を検討する。 日本語フォントはファイルサイズが大きくなります。使用する文字が限定的な見出しのみなどの場合は、Google Fontsのtext=パラメーターでサブセットを指定すると転送量を大幅に削減できます。
- Figmaのテキストスタイルにフォントを登録して統一管理する。 使用するフォント・ウェイト・サイズをFigmaのText Styleとして登録。デザインとコード実装で同じフォント設定を維持できます。
5. ライセンスと注意点
Google Fontsのフォントは全てOFLまたはApache License 2.0などのオープンソースライセンスで提供されており、Webサイト・アプリ・印刷物・商用プロジェクトを問わず無料で使用できます。ただし、フォントファイルを再配布する場合はライセンス表記が必要なものもあるため、ダウンロードして使う場合は各フォントの個別ライセンスを確認してください。
なお、Google FontsはCDNからフォントを配信するため、GDPRの観点から欧州向けサービスでは自己ホスティング（フォントを自サーバーに置く）が推奨される場合があります。
まとめ：フォント選定の「型」を持つ
Google Fontsは「無料で使えるフォント集」以上の存在です。正しく実装すれば表示速度を損なわず、Figmaとのワークフローも最適化できます。まずは日本語フォントをLanguageフィルターで絞り込み、プレビュー文字を実際のコピーに変えて比較するところから始めてみてください。