Googleフォントおすすめ日本語フォント10選と使い方【2026年版】

Q: 手書き風フォントを使うとサイトが重くなりますか？

使い方次第です。手書き風は見出しやキャッチコピーなど表示する文字が固定されている場合が多いため、URLにtextパラメータを付けて必要な文字だけ読み込めば、サイズはほぼ無視できる水準まで下がります。ただしtextで指定した文字以外は表示されないので、CMSで更新される箇所には使わないでください。

この記事の対象: 手書き風の日本語Webフォントを探している、または日本語Googleフォントの選定と実装を見直したいWeb制作者
読了時間: 約13分

手書き風の日本語フォントを無料で使いたい。Googleフォントで探すと候補は出てくるものの、「本文に使っていいのか」「どれが読みやすいのか」の判断がつかないまま雰囲気で選んでしまいがちです。

先に結論を書きます。本文にも使える手書き風はKlee One（クレーワン）だけです。Yomogi・Zen Kurenaido・Hachi Maru Pop・Yusei Magicは装飾性が強く、見出しやキャッチコピーに限定するのが正解です。そして手書き風を使うときは、必ず本文用のゴシック体とセットで組みます。

この記事では、手書き風の5書体を「どこまで使えるか」の線引きつきで紹介し、そのあとゴシック・明朝・丸ゴシックまで含めた選び方、読み込みが重くならない実装コードまでを一本にまとめます。コードはそのままコピーして使えます。

手書き風の日本語Googleフォント5選｜使える範囲つき

手書き風フォントは、温かみや人の気配を伝える書体です。カフェ・ベーカリー・教育機関・ハンドメイド系のサイトで、テキストにぬくもりを足したいときに選ばれます。

一方で、手書き風は文字の形が均一でないぶん、長い文章に使うと読む速度が落ちます。どこまで使えるかを先に整理しておきます。

フォント名	ウェイト	使える範囲	印象
Klee One	400・600	本文まで可	教科書体に近い。整った手書き
Yomogi	400	見出し・リード文まで	丸くやわらかい。手紙のような温かさ
Zen Kurenaido	400	見出し・キービジュアル	筆の流れがある。和のテイスト
Yusei Magic	400	見出し・短いコピー	マーカーで書いたような太さ
Hachi Maru Pop	400	装飾テキストのみ	子供が書いたようなポップさ

Klee One｜手書き風で唯一、本文に使える

教科書体に近い字形を持つ手書き風フォントです。ハネやハライに手書きの気配を残しながら、文字の骨格そのものは整っているため、複数行にわたる段落に使っても読み疲れしにくい設計です。手書き風フォントの中で本文に耐える唯一の書体と考えて構いません。

ウェイトはRegular（400）とSemiBold（600）の2つ。見出しに600、本文に400を当てれば、手書き風だけでサイト全体を組むこともできます。教育系サイト、ナチュラルテイストのブランドサイト、レターのような読み物ページに向きます。

/* Klee One だけでサイト全体を組む場合 */
h1, h2, h3 {
  font-family: 'Klee One', serif;
  font-weight: 600;
}

body {
  font-family: 'Klee One', serif;
  font-weight: 400;
  line-height: 1.9; /* 手書き風は行間を広めに取ると読みやすい */
}

実装のポイント: 手書き風は文字の高さが不揃いなので、line-height を通常より広く（1.8〜2.0）取ります。ゴシック体と同じ1.6のままだと行が詰まって見えます。

Yomogi｜手紙のようなやわらかさ

丸みのある手書き文字で、Klee Oneよりカジュアルです。日記や手紙を思わせる字形で、カフェ・ベーカリー・子供向けサービスのキャッチコピーに合います。

1ウェイト（400）のみなので、太さでメリハリをつけられません。見出しの強弱はfont-sizeと色で作ります。リード文（2〜3行）程度なら読めますが、それ以上の長文には向きません。

Zen Kurenaido｜和テイストの筆文字寄り

筆で書いたような流れのある書体です。和菓子・茶道・書道・日本酒など、日本文化に関わるサイトの見出しやキービジュアルで映えます。

Zenファミリーの一員なので、同ファミリーのZen Kaku Gothic NewやZen Old Minchoと組み合わせると、字面の設計思想が揃って自然にまとまります。これは実務でかなり効くテクニックです。

Yusei Magic｜マーカーで書いたような太さ

太めのマーカーで書いたような手書き風。線が太いぶん小さいサイズでは潰れますが、大きく使うと目を引きます。イベント告知・キャンペーンバナーの見出しに向きます。1ウェイト（400）のみ。

Hachi Maru Pop｜装飾専用と割り切る

子供が書いたような丸くポップな手書き文字です。可愛らしさは強いものの可読性は低いため、装飾テキスト・ワンポイント・ロゴ的な扱いに絞ってください。ナビゲーションや本文に使うと読みづらくなります。1ウェイト（400）のみ。

手書き風フォントの組み合わせ方｜本文はゴシックに逃がす

手書き風を使うときの基本形は、見出しに手書き風・本文にゴシック体です。温かみを出しながら、読む部分の可読性を守れます。

手書き風フォントの2つの組み方

見出しだけ手書き風（安全）

見出し = Klee One / Yomogi
本文 = Noto Sans JP
読み疲れしない
どのフォントでも成立する

全体を手書き風（限定的）

見出し・本文とも Klee One
使えるのは Klee One だけ
行間を1.9前後に広げる
読み物ページ向き

コードにするとこうなります。

/* 見出しに Klee One、本文に Noto Sans JP */
h1, h2, h3 {
  font-family: 'Klee One', 'Noto Sans JP', serif;
  font-weight: 600;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.8;
}

つまずきやすい点: font-familyの最後に置く総称フォント名です。手書き風フォントの多くはGoogle Fonts上でcursiveカテゴリではなく、実質的にセリフ／サンセリフ寄りの骨格を持ちます。cursiveを指定するとフォント読み込み失敗時に環境依存の筆記体（英語圏の装飾体）へ落ちるため、日本語サイトではserifかsans-serifを置くほうが崩れ方が穏やかです。

もう一点。手書き風フォントを当てた見出しにfont-weight: boldを指定しても、そのウェイトが存在しなければブラウザが機械的に太らせる合成ボールドが発生し、字形が潰れます。1ウェイトしかないYomogi・Zen Kurenaido・Hachi Maru Pop・Yusei Magicでは、font-weight: 400を明示しておくと安全です。

/* 1ウェイトのみのフォントは合成ボールドを避ける */
.catch {
  font-family: 'Yomogi', sans-serif;
  font-weight: 400; /* bold を指定しない */
  font-size: 2rem;
}

Soreiine!!ギャラリーで見る、手書き風フォントの使い方チェックポイント

書体単体で見ても判断がつきにくいので、実際のサイトでどう使われているかを基準に考えます。Soreiine!!ギャラリーで手書き風フォントを使ったサイトを探すときは、次の3点を見ると選び方の精度が上がります。

Soreiine!! ギャラリーを見る

チェック1: 手書き風は1画面に1箇所になっているか

手書き風フォントがうまく効いているサイトは、たいてい1画面の中で手書き風が使われている箇所を1つに絞っています。ファーストビューのキャッチコピーだけ手書き風にして、ナビゲーション・リード文・ボタンはゴシック体のまま、という構成です。手書き風が1箇所に絞られているぶん、その1行に視線が集まります。逆に見出し・ボタン・価格表示まで手書き風にすると、どこを読めばいいのか分かりにくくなります。

チェック2: 読ませる情報はゴシックか明朝に戻っているか

ロゴ周りや見出しは手書き風でも、フッターの会社概要やプライバシーポリシー、商品説明の長文、原材料や価格といった実用情報は読みやすい書体に戻っているか。「雰囲気を作る文字」と「情報を伝える文字」が分かれているサイトは、書体の意図がはっきりしています。和菓子・日本酒のような和テイストのサイトでは、商品名やコンセプト文に筆文字寄りの手書き風、説明文には明朝体、という二段構えがよく機能します。

チェック3: ページ単位で書体を使い分けているか

学習塾・保育園・習い事系のように情報量が多いサイトでは、トップページは手書き風（Klee One）で温度を出し、募集要項や料金ページは数字と記号が揃いやすい丸ゴシック（M PLUS Rounded 1c）に切り替える、という使い分けも有効です。1つのサイトの中で書体を統一しなければいけない、と決めつけない方がうまくいきます。

Soreiine!!ギャラリーを見るときは、この3点を基準に「なぜこのサイトは手書き風が浮いていないのか」を分解していくと、自分のサイトに応用しやすくなります。

手書き風以外も含めた日本語Googleフォントの選び方

Googleフォントは、Googleが提供する無料のWebフォントサービスです。日本語書体も継続的に追加されており、ゴシック・明朝・丸ゴシック・手書き風の4系統が揃っています。

すべてのフォントがSIL Open Font License 1.1（OFL）またはApache License 2.0で提供されているため、個人・商用を問わず無料で使えます。

4系統の代表フォント

系統	特徴	代表フォント
ゴシック体	線の太さが均一。画面での視認性が高く本文の定番	Noto Sans JP
明朝体	横線が細く縦線が太い。上品さや格式を出せる	Noto Serif JP
丸ゴシック	ゴシックの角を丸めた書体。柔らかく親しみやすい	M PLUS Rounded 1c
手書き風	手書きの温かみ。見出し中心に使う	Klee One

ゴシック体｜迷ったらNoto Sans JP

Noto Sans JPはGoogleが「世界中の言語をカバーする」目的で開発したNotoファミリーの日本語ゴシックです。複数のウェイトに対応しており、見出しから本文まで1つのファミリーで統一できます。手書き風フォントの相方としても最も無難な選択です。

BIZ UDPゴシックはモリサワが開発したユニバーサルデザインフォント。文字のふところが広く、小さいサイズでも判読しやすい設計です。自治体サイトや公共サービスなど、可読性とアクセシビリティを重視する案件に向きます。

Zen Kaku Gothic Newは幾何学的でモダンなゴシック体。欧文部分の設計にも力が入っており、日英混在のサイトやテック系に合います。Zen Kurenaidoと同ファミリーなので、和テイスト＋モダンの組み合わせに使えます。

M PLUS 1pはNoto Sans JPよりやや字面がコンパクト。複数ウェイトに対応し、スタートアップ系サイトに合います。

明朝体｜和・高級感を出す

Noto Serif JPは読みやすさと上品さのバランスが取れた明朝体です。旅館・ホテル・高級ブランド・出版系での定番です。

Shippori Mincho（しっぽり明朝）はオールドスタイルの明朝体。複数ウェイトに対応し、縦書きとの相性もよく、和食・日本酒・伝統工芸のサイトに映えます。本文の可読性を上げたいときは太めの「Shippori Mincho B1」を使います。

Zen Old MinchoはShippori Minchoより端正な印象で、文学系メディアや出版サイトの本文向き。Sawarabi MinchoはWeb表示での可読性を意識した設計で、1ウェイトのみですが本文に使いやすいバランスです。

丸ゴシック｜柔らかさ・親しみやすさ

M PLUS Rounded 1cは日本語丸ゴシックの定番で複数ウェイトに対応します。子供向けサービスやカジュアルなWebサービスに最適です。

Zen Maru GothicはM PLUS Rounded 1cよりやや落ち着いた印象です。カジュアルすぎないデザインに丸ゴシックを取り入れたいときに使います。Kosugi Maruはコンパクトな字面で1ウェイトのみ。軽い印象のサイトに向きます。

業種別の組み合わせ早見表

業種・用途	組み合わせ	理由
カフェ・ベーカリー	Klee One（見出し）+ Noto Sans JP（本文）	温かみと可読性の両立
ハンドメイド・雑貨	Yomogi（見出し）+ Zen Maru Gothic（本文）	手作り感のある柔らかさ
和菓子・日本酒・伝統工芸	Zen Kurenaido（見出し）+ Noto Serif JP（本文）	筆の質感と読みやすさ
教育・保育（読み物）	Klee One 単体	手書き風で全体を組める唯一の書体
教育・保育（情報量が多い）	M PLUS Rounded 1c	表組みと数字が揃う
イベント・キャンペーン	Yusei Magic（見出し）+ Noto Sans JP（本文）	太さで目を引く
コーポレート全般	Noto Sans JP	癖がなく信頼感がある
公共・自治体	BIZ UDPゴシック	UD設計で誰にでも読みやすい
旅館・ホテル・和食	Noto Serif JP / Shippori Mincho	和の格式・高級感
テック・スタートアップ	Zen Kaku Gothic New	モダンで洗練された印象

フォントを2種類以上使うときは、同系統同士（ゴシック×ゴシック）を避け、手書き×ゴシックやゴシック×明朝のように系統をずらすとメリハリが出ます。

フォント選びはサイトの方向性そのものと直結します。書体を決める前に、どのツールでカンプを作るかも含めて設計の進め方を見直しておくと、選定で迷いません。

デザイン AI Webデザインのカンプ生成と画像運用ルール｜著作権と品質の線引き「この素材、AIで作りました」と制作会社から言われたとき、発注者は何を確認すればいいのか。逆に制作側は、どこまでAI生成画像を混ぜてよくて、どこから危ないの…

コラム Google 2026年コアアップデートの影響と対策まとめ Googleのコアアップデートは、検索結果の順位が大きく変動するイベントです。「昨日まで1ページ目だったのに、突然圏外に飛ばされた」——こうした事態は、コア…

Googleフォント日本語の実装コード｜コピーして使える

ここからは実装です。読み込み方法とパフォーマンス設定を、そのまま貼れるコードで示します。

手書き風＋本文フォントを1リクエストで読み込む

見出しと本文で別フォントを使う場合、family=を&でつなげて1回のリクエストにまとめられます。

<!-- Klee One（見出し）と Noto Sans JP（本文）をまとめて読み込む -->
<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=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

h1, h2, h3 {
  font-family: 'Klee One', 'Noto Sans JP', serif;
  font-weight: 600;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.8;
}

なぜこう書くのか: 最初の2行のpreconnectは、GoogleフォントCDNへの事前接続です。DNS解決・TCP接続・TLSハンドシェイクを先に済ませておくことで、CSSを読んだ直後にフォントファイルの取得へ移れます。これを書かないと、CSSを読み終わってから接続処理が始まり、その分だけ表示が遅れます。2行セットで書くのを忘れないでください。

&family=でまとめるのは、個別に<link>を並べるよりHTTPリクエストが減るためです。

対応ブラウザ: preconnectはChrome・Edge・Firefox・Safariのいずれも対応済みです。display=swap（font-display）も同様に主要ブラウザで利用できます。

@importは使わない

CSSの@importでも読み込めますが、CSSの解析をブロックするため表示速度で不利です。

/* 非推奨 */
@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');

linkタグと@importの比較

HTMLと並行して読み込める
レンダリングへの影響が小さい
preconnectと組み合わせやすい

@import（非推奨）

CSSの解析をブロックする
読み込みが直列になる
表示速度で不利

特別な理由がない限り<link>タグを使ってください。CSSファイルの中に書くとフォント読み込みの開始がCSS取得後まで遅れる、という点だけ押さえておけば判断できます。

必要なウェイトだけ読み込む

日本語フォントはファイルサイズが大きいため、使わないウェイトを読み込むと表示速度に響きます。Noto Sans JPは複数ウェイトを持ちますが、多くのサイトでは本文の400と見出しの700だけで足ります。

<!-- 良い例: 必要な2ウェイトだけ -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

<!-- 悪い例: 全ウェイトを読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

手書き風フォントは1〜2ウェイトしかないため、ここで肥大するのは基本的に本文用のゴシック側です。デザインカンプを見て、実際に使うウェイトだけ指定してください。

font-displayの使い分け

URLのdisplay=で、フォント読み込み中の表示挙動を制御できます。

値	挙動	向いている用途
`swap`	システムフォントで即表示 → 読み込み後に切り替え	本文テキスト全般（推奨）
`fallback`	短時間だけ代替表示 → 遅ければ切り替えない	レイアウトシフトを抑えたい場合
`optional`	高速なら切り替え、遅ければそのまま	パフォーマンス最優先
`block`	一定時間テキスト非表示 → フォントで表示	ロゴ・アイコンフォント

一般的なサイトではswapで問題ありません。テキストが一瞬システムフォントで表示された後にWebフォントへ切り替わるFOUT（Flash of Unstyled Text）が起きますが、テキストが読めない時間をゼロにできるため、体験としてはblockより優れています。

手書き風での注意点: 手書き風フォントは代替フォント（ゴシック）と字幅が大きく違うため、swapだと切り替わった瞬間のレイアウト変化が目立ちます。ファーストビューの大きなキャッチコピーで気になる場合は、次のセクションのtextパラメータと組み合わせて読み込みを軽くするのが有効です。

日本語フォントが重い理由と、手書き風を軽く使う方法

なぜ日本語フォントはファイルサイズが大きいのか

英語フォントはアルファベット・数字・記号で数百グリフをカバーすれば済みます。日本語フォントはひらがな・カタカナ・漢字を含めると数千文字以上を収録する必要があり、全体では容量が大きくなります。何も考えずに読み込むと表示が目に見えて遅くなります。

unicode-rangeによる自動分割配信

Googleフォントはこの問題に対し、unicode-rangeを使った分割配信で対応しています。

フォントファイルをUnicodeの文字コード範囲ごとに細かく分割し、ページ内で実際に使われている文字が含まれるスライスだけをブラウザがダウンロードする仕組みです。Googleフォントのcss2APIが返すCSSには、次のような@font-faceルールが大量に並んでいます。

/* Googleフォントが返すCSSの一部（概要） */
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kleeone/....woff2) format('woff2');
  unicode-range: U+3041-3093, U+3099-309F, ...;
}

@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kleeone/....woff2) format('woff2');
  unicode-range: U+4E00-4E01, U+4E03, U+4E07-4E0B, ...;
}

ブラウザがページ内のテキストを解析し、該当する範囲のファイルだけをリクエストします。この処理はGoogleフォント側が自動でやるため、開発者の設定は不要です。<link>タグで正しく読み込むだけで恩恵を受けられます。

textパラメータで手書き風を劇的に軽くする

手書き風フォントの使いどころは、ほとんどが見出し・キャッチコピー・ロゴです。つまり表示する文字が決まっている。ここで効くのがtextパラメータです。

<!-- キャッチコピーの文字だけ読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Yomogi&text=今日のおやつをつくる&display=swap" rel="stylesheet">

指定した文字だけを含むサブセットが返るため、フォントファイルのサイズを大幅に小さくできます。手書き風を「1画面に1箇所」で使う設計なら、この方法とセットにすると読み込みコストがほぼ無視できる水準まで下がります。

手書き風フォントの読み込み方を決める手順

使う箇所を数える見出しだけか、本文も使うか

文字が固定か判定固定ならtextパラメータ

ウェイトを絞る使う太さだけ指定する

DevToolsで実測Networkタブでサイズを見る

「使う箇所が固定か動的か」で読み込み方が変わる、という順番で判断すれば迷いません。

つまずきやすい点: textパラメータを使ったフォントは、指定した文字以外が表示されません。CMSで更新される見出しに使うと、あとから追加した文字がフォールバックのゴシックで表示され、1つの見出しの中で書体が混ざります。更新されないコピーにだけ使うのが鉄則です。

表示速度への影響を実測する

Chrome DevToolsで確認します。

Chromeで対象のページを開く
DevToolsを起動する（macOS: Cmd + Option + I、Windows: F12）
Networkタブを選び、フィルタ欄にfontと入力する
Cmd + Shift + R（Windows: Ctrl + Shift + R）でキャッシュなしリロード
表示されたフォントファイルの数・サイズ・読み込み時間を確認する

見るポイントは3つです。

ファイル数: unicode-range分割により複数のwoff2が読み込まれる。ページで使う漢字が多いほど増える
合計サイズ: 日本語フォントは1ウェイトでも欧文フォントより重くなりやすい。フォント追加の前後で差分を見る
読み込み時間: preconnectが効いていれば個々のファイルは短時間で取得できる

手書き風を追加する前後で合計サイズを比べると、textパラメータの効き方が数字で確認できます。

表示速度やコードの書き方そのものは、CSSの他のテクニックとも地続きです。画像の読み込みを軽くする考え方は以下でも扱っています。

テクニック画像遅延読み込みでLCP 改善｜loading属性とサイズ指定の実装画像が多いページで表示が重い、Lighthouseで「LCP」の項目が赤い、スクロールすると要素がガクッと動く。この3つは原因がつながっていて、テンプレート…

フォントの指定やCSSの実装自体にAIの支援を使う場面も増えています。プロンプトの型を工程別にまとめた記事もあわせて読むと、実装のたたき台づくりが速くなります。

テクニック ChatGPT×Web制作のプロンプト実務｜工程別の型を公開「ChatGPTを制作に使っている」と言うと、たいてい次の質問が返ってきます。「何に使っているんですか」。この答えが曖昧なうちは、まだ実務に組み込めていない…

Googleフォントの商用利用とライセンス

Googleフォントのフォントはすべてオープンソースライセンスで提供されています。大半がSIL Open Font License 1.1（OFL）、一部がApache License 2.0です。手書き風フォントも例外ではありません。

商用利用でできること

Webサイト（個人・法人問わず）での表示
印刷物（名刺・チラシ・パッケージなど）への使用
アプリやソフトウェアへの組み込み
フォントを改変した派生フォントの作成と配布（OFLの条件に従う）

通常のWebフォント利用であれば、ライセンス上の制約を気にする場面はほぼありません。

確認が必要になる場面

各フォントのライセンスはGoogle Fontsのフォント詳細ページで確認できます。実務で確認が必要になるのは主に2つです。

クライアントワークで納品するとき: ライセンスがOFLであることを確認し、求められればクライアントに共有する
フォントファイル自体を改変するとき: OFLでは改変後のフォントを同一ライセンスで公開する必要があり、元のフォント名をそのまま使えない制約もある

手書き風フォントをロゴに加工して使うケースは実際に出てきます。ロゴ化＝改変にあたるかどうかは、フォントをアウトライン化して図形として使うだけなのか、フォントファイルそのものを編集するのかで扱いが変わります。判断に迷ったら各フォントのライセンス条文を確認してください。

画像や生成物の利用ルールを合わせて確認したい場合は、こちらも参考になります。

リニューアルガイド AI画像生成の商用利用｜Webサイトで使う前の注意点と確認手順「この画像、AIで作ったものなんですけど、サイトに載せて大丈夫ですか」制作の現場で、ここ最近いちばん増えた質問です。聞かれる側も即答できません。ツールごと…

よくある質問

手書き風の日本語Googleフォントで本文に使えるのはどれですか？

Klee Oneです。教科書体に近い整った字形で、手書き風フォントの中で長文の可読性を保てる唯一の書体です。Yomogi・Zen Kurenaido・Yusei Magic・Hachi Maru Popは装飾性が強いため、見出しやキャッチコピーなど短いテキストに限定してください。本文に使う場合は行間を1.8〜2.0に広げると読みやすくなります。

手書き風フォントを使うとサイトが重くなりますか？

使い方次第です。手書き風は見出しやキャッチコピーなど表示する文字が固定されている場合が多いため、URLにtextパラメータを付けて必要な文字だけ読み込めば、サイズはほぼ無視できる水準まで下がります。ただしtextで指定した文字以外は表示されないので、CMSで更新される箇所には使わないでください。

手書き風フォントに font-weight: bold を指定してもいいですか？

そのフォントが太いウェイトを持っていない場合は避けてください。ブラウザが機械的に文字を太らせる合成ボールドが発生し、手書きの線が潰れて汚くなります。Klee OneはSemiBold（600）を持っているので600を指定できますが、Yomogi・Zen Kurenaido・Yusei Magic・Hachi Maru Popは1ウェイトのみなのでfont-weight: 400を明示するのが安全です。

日本語Googleフォントで一番おすすめはどれですか？

本文用ならNoto Sans JPです。複数ウェイトに対応し業種を問わず使え、Googleが継続的にメンテナンスしているため表示崩れのリスクも低い書体です。手書き風フォントを見出しに使うときの相方としても、癖がなく合わせやすい選択になります。和の雰囲気を出したい場合はNoto Serif JPが候補です。

Googleフォントをセルフホスティングするメリットは何ですか？

GoogleのCDNを使わず、フォントファイルを自分のサーバーに置く方法です。外部CDNへの接続が不要になりプライバシー面で有利なこと、CDN障害の影響を受けないことがメリットです。一方でunicode-rangeの自動分割配信を受けられず、自分でサブセット化を行う必要があります。外部リソースの利用を制限しているプロジェクトで検討してください。