Google Fontsのおすすめ日本語フォント|制作会社が実務で使う書体と設定手順

Google Fontsのおすすめ日本語フォントは、本文なら「Noto Sans JP」「Zen Kaku Gothic New」、やわらかい印象なら「Zen Maru Gothic」、上品さを出すなら「Shippori Mincho」です。Google Fontsは無料・商用利用可のWebフォントサービスで、2026年9月時点で日本語に対応した書体は68種類あります。この記事では、Web制作会社が実案件で使っている書体を分類別に紹介し、業種別の組み合わせ例、サイトへの設定手順、表示が重いときの対処までまとめて解説します。

ゴシック体・丸ゴシック体・明朝体・デザイン書体の見え方の比較
同じ文章を4分類のフォントで表示した比較
目次

Google Fontsとは?日本語フォントは68種類

closeup photo of cutout decors
Photo by Raphael Schaller on Unsplash

Google Fontsとは、Googleが提供している無料のWebフォント配信サービスです。公式のフォントデータを確認すると、2026年9月時点で登録ファミリーは1,946種類、そのうち日本語(japaneseサブセット)に対応した書体は68種類あります。2026年に入ってからも「LINE Seed JP」「M PLUS U」などが追加されており、選択肢は毎年少しずつ増えています。

Webフォントとデバイスフォントの違い

Webフォントは、閲覧時にサーバーからフォントデータを読み込んで表示する仕組みです。一方のデバイスフォントは、閲覧者のパソコンやスマートフォンに最初から入っている書体(Windowsの游ゴシック、Macのヒラギノ角ゴシックなど)を使います。デバイスフォントは読み込みが不要なぶん軽い反面、端末ごとに見た目が変わります。Webフォントを使えば、Windows・Mac・iPhone・Androidのどれで見ても同じ書体でデザインを再現できます。

なお、游ゴシックをWebで使うと細くかすれて見える問題があります。詳しくはWebサイトで游ゴシックをおすすめしない理由で解説しています。

商用利用とライセンス

Google Fontsの日本語フォントは、ほとんどがSIL Open Font License(OFL)で公開されており、企業サイト・ECサイト・広告バナーなどの商用利用が無料で認められています。クレジット表記も不要です。ただし、フォントファイルそのものを単体で販売することはできません。制作の現場では、念のため各フォントの詳細ページにある「License」欄を確認してから採用するようにしています。

日本語フォントを選ぶ前に決める3つの基準

フォント選びで失敗しないためには、見た目の好みより先に「用途」「ウェイト数」「表示速度」の3点を決めることが大切です。この3つが決まると、68種類の候補は数種類まで絞り込めます。

本文用か、見出し用か

本文に使う書体は、小さいサイズでもつぶれず、長文でも目が疲れないことが最優先です。ゴシック体か、線の太さが均一な明朝体を選びます。反対に、Dela Gothic Oneのような極太書体や手書き風書体は、本文に使うと一気に読みにくくなります。見出しやキャッチコピーなど「短い文字」に限定して使うのが基本です。

ウェイト(太さ)の数

ウェイトとは文字の太さの種類のことで、Google Fontsでは100(極細)〜900(極太)の数値で表します。本文400・見出し700のように太さで情報の強弱をつけたい場合は、2種類以上のウェイトを持つ書体を選んでください。ウェイトが1種類しかない書体に太字を指定すると、ブラウザが無理やり太らせた「疑似ボールド」になり、文字がにじんだように見えます。

表示速度への影響

日本語フォントは漢字を含むため、英語フォントに比べてデータ量が数十倍になります。Google Fontsは文字を小さな単位に分割して必要な分だけ配信する仕組みを持っていますが、それでもウェイトを増やすほど読み込みは重くなります。1サイトで使う書体は2ファミリー・合計3〜4ウェイトまでを目安にすると、表示速度とデザインのバランスがとれます。

ゴシック体のおすすめ4選

ゴシック体は、コーポレートサイトから店舗サイトまで最も幅広く使える分類です。迷ったらまずゴシック体から選び、ブランドの雰囲気に合わせて明朝体や丸ゴシックを見出しに組み合わせるのが定番の進め方です。

Noto Sans JP|迷ったらこれ

Noto Sans JPの表示見本
Noto Sans JPの表示見本(Google Fontsで実際に表示)

GoogleとAdobeが共同開発したゴシック体で、ウェイトは100〜900の9種類。クセがなく、どの業種のサイトにもなじみます。可変フォント(1ファイルで太さを連続的に変えられる形式)にも対応しており、デザインの自由度が高いのも特長です。利用者が非常に多いため「どこかで見た印象」になりやすい点だけは注意してください。

Zen Kaku Gothic New|少しだけ柔らかいゴシック

Zen Kaku Gothic Newの表示見本
Zen Kaku Gothic Newの表示見本(Google Fontsで実際に表示)

ウェイトは300・400・500・700・900の5種類。Noto Sans JPより文字のふところがやや広く、ひらがなに適度な柔らかさがあります。士業・医療・住宅など「信頼感はほしいが、堅すぎる印象は避けたい」サイトの本文に向いています。当社でも採用することが多い書体です。

M PLUS 1p・M PLUS 2|モダンで幾何学的

M PLUS 1p・M PLUS 2の表示見本
M PLUS 1p・M PLUS 2の表示見本(Google Fontsで実際に表示)

M PLUS 1pは7ウェイト、後継のM PLUS 1・M PLUS 2は9ウェイトの可変フォントです。直線的で現代的なデザインのため、IT企業・スタートアップ・アプリの紹介サイトと相性がよい書体です。英数字も読みやすく、数字の多い料金表やスペック表でも崩れません。

BIZ UDPGothic|読みやすさ最優先

BIZ UDPGothicの表示見本
BIZ UDPGothicの表示見本(Google Fontsで実際に表示)

モリサワのユニバーサルデザイン(UD)書体で、ウェイトは400・700の2種類。濁点・半濁点が大きく、数字の「3」「8」なども見間違えにくい設計です。自治体・学校・医療機関・シニア向けサービスなど、幅広い年齢層が閲覧するサイトの本文に最適です。等幅版のBIZ UDGothicもあります。

丸ゴシック体のおすすめ3選

wooden tables and chairs inside white room
Photo by Janosch Lino on Unsplash

丸ゴシック体は、線の端が丸く処理された書体で、親しみやすさや安心感を伝えられます。保育園・学習塾・カフェ・美容サロンなど、やさしい印象を大切にしたいサイトで活躍します。

Zen Maru Gothic|上品な丸み

Zen Maru Gothicの表示見本
Zen Maru Gothicの表示見本(Google Fontsで実際に表示)

ウェイトは5種類。丸ゴシックでありながら子どもっぽくなりすぎず、大人向けのサロンやクリニックにも使える上品さがあります。本文にも見出しにも使えるため、丸ゴシック1書体でサイト全体をまとめたいときの第一候補です。

M PLUS Rounded 1c|ポップで元気

M PLUS Rounded 1cの表示見本
M PLUS Rounded 1cの表示見本(Google Fontsで実際に表示)

ウェイトは7種類。丸みがはっきりしていて、明るく元気な印象になります。キッズ向けサービスやイベント告知、飲食店のメニュー表示など、にぎやかさを出したい場面に向いています。太いウェイト(800・900)はバナーの見出しにも使えます。

Kiwi Maru・Kosugi Maru|個性派とすっきり派

Kiwi Maru・Kosugi Maruの表示見本
Kiwi Maru・Kosugi Maruの表示見本(Google Fontsで実際に表示)

Kiwi Maruは手書きのような揺らぎを持つ丸文字で、ウェイトは3種類。雑貨店やハンドメイド作家のサイトで温かみを出せます。Kosugi Maruは1ウェイトのみですが、すっきりした曲線で主張が控えめです。どちらも個性が強めなので、見出しやアクセント用途に向きます。

明朝体のおすすめ3選

明朝体は、高級感・伝統・知性を表現したいときに選ぶ分類です。旅館・和菓子店・ホテル・法律事務所・ブランドサイトなどでよく使われます。細い線がつぶれないよう、本文に使う場合は16px以上の文字サイズを確保してください。

Noto Serif JP|万能な明朝体

Noto Serif JPの表示見本
Noto Serif JPの表示見本(Google Fontsで実際に表示)

Noto Sans JPと対になる明朝体で、ウェイトは200〜900の8種類。クセが少なく、本文にも見出しにも使えます。本文をNoto Sans JP、見出しをNoto Serif JPにすると、統一感を保ちながらメリハリのある紙面が作れます。

Shippori Mincho|上品で落ち着いた印象

Shippori Minchoの表示見本
Shippori Minchoの表示見本(Google Fontsで実際に表示)

ウェイトは400〜800の5種類。筆の運びを感じさせるやわらかなエッジが特長で、老舗店や和の要素を持つブランドとの相性が抜群です。横書きでも縦書きでも美しく組めます。より古風な仮名を持つShippori Mincho B1もあります。

Zen Old Mincho|レトロで味のある明朝

Zen Old Minchoの表示見本
Zen Old Minchoの表示見本(Google Fontsで実際に表示)

ウェイトは5種類。昔の活版印刷を思わせる、少し太めでやわらかな明朝体です。喫茶店・古民家カフェ・地域の観光案内など、ノスタルジックな雰囲気を出したいサイトの見出しに向いています。

見出し・装飾向けのデザイン書体3選

デザイン書体は、キャッチコピーやバナーなど「目を引きたい短い文字」専用と考えてください。本文に使うのは避け、1ページに1〜2か所のアクセントとして使うと効果的です。

Dela Gothic One|インパクト重視の極太

Dela Gothic Oneの表示見本
Dela Gothic Oneの表示見本(Google Fontsで実際に表示)

非常に太いゴシック体で、セール告知・イベントLP・ファーストビューの大見出しで強い存在感を出せます。ウェイトは1種類のみ。小さいサイズではつぶれるので、32px以上を目安に使います。

Kaisei Decol・Kaisei Opti|装飾的な明朝

Kaisei Decol・Kaisei Optiの表示見本
Kaisei Decol・Kaisei Optiの表示見本(Google Fontsで実際に表示)

どちらも3ウェイトの明朝系デザイン書体です。Kaisei Decolは文字の先端が丸く、かわいらしさと上品さを両立できます。Kaisei Optiは少しポップな印象で、女性向けの商品ページやパンフレット風の見出しに向いています。

Mochiy Pop One|親しみのあるポップ体

Mochiy Pop Oneの表示見本
Mochiy Pop Oneの表示見本(Google Fontsで実際に表示)

手書き文字をもとにしたポップな書体で、1ウェイト。飲食店のおすすめメニューや子ども向けイベントの見出しで、楽しい雰囲気を簡単に演出できます。手書き風の書体をもっと知りたい方は手書き風の日本語Webフォントまとめもあわせてご覧ください。

おすすめ日本語フォントの一覧と業種別の組み合わせ

a man using a laptop
Photo by Sanni Sahil on Unsplash

ここまで紹介した書体を一覧表にまとめました。ウェイト数は2026年9月時点のGoogle Fonts公式データに基づいています。

フォント名分類ウェイト数向いている用途
Noto Sans JPゴシック9本文・見出し全般
Zen Kaku Gothic Newゴシック5士業・医療・住宅の本文
M PLUS 2ゴシック9IT・スタートアップ
BIZ UDPGothicゴシック(UD)2自治体・教育・シニア向け
LINE Seed JPゴシック4アプリ・Webサービス
Zen Maru Gothic丸ゴシック5サロン・クリニック
M PLUS Rounded 1c丸ゴシック7キッズ・イベント
Kiwi Maru丸文字3雑貨・ハンドメイド
Noto Serif JP明朝8見出し・読み物
Shippori Mincho明朝5老舗・和のブランド
Zen Old Mincho明朝5レトロ・観光
Dela Gothic Oneデザイン1LP・セールの大見出し
Kaisei Decolデザイン(明朝系)3女性向け商品の見出し
Mochiy Pop Oneデザイン(ポップ)1飲食・子ども向け

実際の制作では、本文用と見出し用の2書体を組み合わせるケースがほとんどです。当社でよく使う組み合わせを業種別にまとめます。

業種・サイトの目的見出し本文
一般企業・建設業のコーポレートサイトNoto Sans JP 700Noto Sans JP 400
士業・医療・福祉Zen Kaku Gothic New 700Zen Kaku Gothic New 400
旅館・和食店・老舗Shippori Mincho 600Noto Sans JP 400
保育園・学習塾M PLUS Rounded 1c 800Zen Maru Gothic 400
美容サロン・カフェZen Old Mincho 500Zen Maru Gothic 400
自治体・シニア向けサービスBIZ UDPGothic 700BIZ UDPGothic 400

Google Fontsをサイトに設定する手順

Google Fontsの設定は、フォントを選んでコードを取得し、HTMLとCSSに貼るだけで完了します。所要時間は10分ほどです。ここでは本文にNoto Sans JPを設定する例で説明します。

ステップ1|フォントを検索して言語を絞り込む

Google Fonts(fonts.google.com)を開き、左側のフィルターで「Language」を「Japanese」に設定します。これで日本語対応の書体だけが表示されます。プレビュー欄に実際のサイトで使う文章を入力すると、ひらがな・漢字の見え方を比較しやすくなります。

ステップ2|使うウェイトだけを選ぶ

書体の詳細ページで「Get font」を押し、「Get embed code」を開きます。可変フォントの場合は「Change styles」から、実際に使う太さ(例:400と700)だけを指定してください。すべてのウェイトを読み込むと、表示速度が大きく落ちます。

ステップ3|HTMLのhead内に埋め込みコードを貼る

表示されたコードを、HTMLの<head>内に貼り付けます。preconnectの2行は、フォントサーバーへの接続を先に始めて表示を速くするためのものなので、省略せずに入れてください。

<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">

ステップ4|CSSでfont-familyを指定する

CSSでbodyなどにfont-familyを指定します。万一Webフォントが読み込めなかったときのために、後ろにデバイスフォントを並べておくのがポイントです。

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
}
h1, h2, h3 {
  font-weight: 700;
}

WordPressの場合は、テーマのカスタマイザーにGoogle Fontsの選択機能があればそれを使い、なければ子テーマのfunctions.phpでwp_enqueue_styleを使って読み込みます。テーマファイルのheader.phpに直接書くと、テーマ更新時に消えてしまうので避けてください。

フォントが反映されない・重いときのチェックリスト

Lines of colorful JavaScript code displayed on a dark screen
Photo by Markus Spiske on Unsplash

設定後に「フォントが変わらない」「ページが重くなった」というご相談はよくあります。症状ごとに、上から順に確認してください。

フォントが反映されない

①font-familyの綴りが正しいか(”Noto Sans JP”のスペースや大文字小文字)、②埋め込みコードが<head>内にあるか、③後から読み込まれる別のCSSで上書きされていないか、の順に確認します。ブラウザの検証ツールで要素を選び、「Computed」タブの「Rendered Fonts」を見ると、実際に表示に使われている書体がわかります。キャッシュ系プラグインを使っている場合は、キャッシュの削除も忘れずに行ってください。

表示が遅い・文字が遅れて切り替わる

読み込むウェイトが多すぎないかをまず確認します。見出しにしか使わないデザイン書体は、URLに「&text=」パラメータを付けて使う文字だけに絞ると、データ量を大幅に減らせます。また、display=swapを指定しておくと、フォントの読み込み中もデバイスフォントで文字が表示されるため、白い画面が続く状態を防げます。

太字が不自然ににじむ

読み込んでいないウェイトをCSSで指定すると、ブラウザが疑似ボールドを生成してにじんだ表示になります。ステップ2で選んだウェイトと、CSSのfont-weightの値が一致しているか確認してください。1ウェイトしかない書体は、strongタグやh見出しに自動で太字がかかるため、font-weight: 400を明示して打ち消します。

よくある質問(FAQ)

Q. Google Fontsの日本語フォントは商用利用できますか?
A. できます。ほとんどがSIL Open Font Licenseで公開されており、企業サイトや広告バナーでも無料で使え、クレジット表記も不要です。

Q. 日本語フォントを使うとサイトは遅くなりますか?
A. デバイスフォントより読み込みは増えます。ただし2ファミリー・3〜4ウェイト程度に抑え、display=swapを指定すれば、体感できるほどの遅延はほとんど起きません。

Q. 本文におすすめの日本語フォントはどれですか?
A. 迷ったらNoto Sans JPです。やや柔らかさがほしい場合はZen Kaku Gothic New、幅広い年齢層向けならBIZ UDPGothicをおすすめします。

Q. Google Fontsのフォントを自社サーバーに置いて使えますか?
A. 使えます。OFLのフォントはダウンロードして自社サーバーから配信することが認められています。海外の個人情報保護規制を意識するサイトでは、Googleのサーバーを経由しないこの方法が選ばれています。

Q. バナーやチラシなど印刷物にも使えますか?
A. 使えます。フォントをパソコンにインストールすれば、PhotoshopやIllustrator、Canvaなどで制作する画像・印刷物にも利用できます。

Q. 英語部分だけ別のフォントにできますか?
A. できます。font-familyの先頭に英語フォントを書くと、英数字はその書体、日本語は次に指定した日本語フォントで表示されます。英語書体の選び方はWebデザイナーが実務で使う英語フリーフォント5選で紹介しています。

まとめ|フォントはサイトの「声のトーン」

sittin people beside table inside room
Photo by Annie Spratt on Unsplash

Google Fontsの日本語フォントは68種類あり、無料・商用利用可で使えます。本文はNoto Sans JPやZen Kaku Gothic Newなど読みやすいゴシック体を軸にし、見出しに明朝体や丸ゴシックを組み合わせてブランドの個性を出すのが基本です。ウェイトは使う分だけに絞り、表示速度にも気を配りましょう。

フォントはサイトの「声のトーン」を決める要素です。THREE D PLUSでは、業種やターゲットに合わせた書体選びから、表示速度まで考えたサイト制作を行っています。フォント選びやサイトリニューアルでお悩みの方は、お気軽にご相談ください。

最新情報をチェックしよう!

LET’S CONTACT

お問い合わせ

デザインと発信の力で、お客様の強みや想いを形にし、
成果につながるコンテンツを制作します。
「うちの場合はどうなる?」という段階からでも、どうぞお気軽にご相談ください。