この記事の対象: 日本語Webフォントを導入したいWeb制作者
読了時間: 約5分
Webフォントを使えば、デバイスやOSに関係なく意図したフォントでテキストを表示できます。Googleフォントは無料で使える上、日本語フォントのラインナップも充実しています。
この記事では、おすすめの日本語Googleフォント10選と、パフォーマンスを意識した導入方法を解説します。
Googleフォントとは
Googleフォントは、Googleが提供する無料のWebフォントサービスです。1,500以上のフォントファミリーが利用可能で、日本語フォントも20種類以上に対応しています。
商用利用も含めて完全無料で、ライセンスを気にする必要がありません。
おすすめ日本語フォント10選
Noto Sans JP（万能ゴシック）
Googleが開発した「すべての言語をカバーする」プロジェクトの日本語ゴシック。7ウェイト対応であらゆるサイトに使える万能フォントです。
向いている業種: 全般（コーポレートサイト、メディア、EC）
Noto Serif JP（上品な明朝）
Noto Sans JPの明朝体版。読みやすく上品な印象で、和のテイストや高級感を出したい場合に最適です。
向いている業種: 旅館、和食、高級ブランド、出版
M PLUS Rounded 1c（柔らかい印象）
角が丸いゴシック体で、親しみやすく柔らかい印象を与えます。子供向けサービスやカジュアルなブランドに。
向いている業種: 教育、保育、カジュアルブランド
M PLUS 1p（モダンゴシック）
M PLUSシリーズの標準ゴシック。Noto Sans JPよりやや個性的でモダンな印象です。
向いている業種: テック系、スタートアップ
Kosugi Maru（カジュアル丸ゴシック）
小杉丸ゴシック。コンパクトでカジュアルかつ読みやすいフォントです。
向いている業種: ブログ、SNS関連、カジュアルなWebサービス
Sawarabi Mincho（可読性高い明朝）
さわらび明朝。Webでの可読性を意識した明朝体で、本文テキストにも使いやすいです。
向いている業種: メディアサイト、文学系
Sawarabi Gothic（さわらびゴシック）
すっきりとしたゴシック体。シンプルで癖がなく、サブフォントとしても使いやすいです。
Zen Kaku Gothic New（モダンゴシック）
幾何学的なデザインのモダンゴシック。欧文フォントとの相性が良く、バイリンガルサイトにも適しています。
Zen Maru Gothic（丸ゴシック）
Zenファミリーの丸ゴシック。M PLUS Rounded 1cよりやや落ち着いた印象で、幅広いデザインにマッチします。
Shippori Mincho（しっぽり明朝）
オールドスタイルの明朝体。伝統的で格式のある印象を与えます。縦書きとの相性も良好です。
向いている業種: 和食、日本酒、伝統工芸
Googleフォントの導入方法
<link>タグで読み込み（推奨）
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: 'Noto Sans JP', sans-serif;
}
@importで読み込み
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
注意: @importはレンダリングをブロックするため、<link>タグの方がパフォーマンスに優れます。
font-display: swap
display=swapパラメータにより、フォントの読み込み中はシステムフォントで表示し、読み込み完了後にWebフォントに切り替えます。これにより、フォント読み込み中のテキスト非表示（FOIT）を防ぎます。
パフォーマンスへの影響と対策
日本語フォントは文字数が多いため、英語フォントの10〜50倍のファイルサイズになります。
サブセット化
Googleフォントは自動的にサブセット（必要な文字だけを配信）してくれますが、さらにtextパラメータで特定の文字だけ読み込むことも可能です。
<!-- 「Hello」の文字だけ読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&text=Hello" rel="stylesheet">
使用するウェイトを絞る
ウェイト（太さ）が増えるほどファイルサイズも増加します。本文用の400と見出し用の700の2ウェイトに絞るのがバランスの良い選択です。
preconnectの活用
GoogleフォントのCDNに事前接続することで、フォント読み込みの開始を早められます。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
まとめ
Googleフォント日本語フォントのポイントをまとめます。
- Noto Sans JPが最も万能。迷ったらこれ
- 明朝体は和のテイストや高級感に、丸ゴシックは親しみやすさに
<link>タグ +display=swapで導入するのがベストプラクティス- ウェイトは2つに絞り、パフォーマンスへの影響を最小限に
- preconnectでフォント読み込みを高速化
