グーグルフォントの手書き体 日本語対応の選び方と実装

この記事の対象: 手書き風フォントをWebサイトで使いたいデザイナー・制作者
読了時間: 約12分

「手書き風の雰囲気を出したい」という要望は、カフェ・雑貨・ハンドメイド・教育系の案件で必ず出てきます。そこで候補に挙がるのがGoogle Fonts。無料で商用利用でき、CDN配信も効くので手が伸びやすい選択肢です。ただ日本語の手書き体に絞ると、使えるものは一気に減ります。欧文を前提にした記事は多いものの、日本語で「どれを選ぶか」「どう軽く読み込むか」まで書いたものは少ない。この記事では日本語対応の手書き体の実態、欧文と日本語の混植、読み込み速度の落とし穴、そして「手書きを使うべきでない場所」まで、実装コード付きで整理します。

グーグルフォントの手書き体は日本語と欧文で事情が違う

日本語の手書き体は「数が少ない」のが前提

Google Fontsで日本語の手書き風を探すと、まず母数の少なさに当たります。日本語フォントは漢字・ひらがな・カタカナ・記号を含めて数千から数万字のグリフが必要で、1書体を作る工数が欧文と比較になりません。結果として、Google Fontsに載っている日本語書体そのものが限られ、そのうち手書き系はさらに一部になります。

検索時に見るべきフィルタは次の2つです。

ここでつまずくポイントがあります。Google Fonts側のカテゴリ分類は欧文基準で付いているため、日本語の手書き系書体がHandwritingカテゴリに入っていないことがあるという点です。筆書体・丸文字・ペン字風などは Sans Serif や Serif に分類されているケースがあり、Handwritingだけで絞ると候補を取りこぼします。

実務では「Language: Japanese で絞って、一覧を目で全部見る」のが結局いちばん早い方法です。日本語書体の総数自体が多くないので、全件目視が現実的な時間で終わります。

欧文の手書き体は選択肢が豊富だが、日本語と混ざると崩れる

一方、欧文の手書き体は数が多く、カリグラフィ調からマーカー風、ペン字風まで揃っています。問題は、日本語ページでそれを指定したときに起きる挙動です。

欧文の手書きフォントには日本語グリフが入っていません。そのため font-family に欧文手書き体だけを指定すると、ひらがな・漢字の部分だけブラウザのフォールバックフォント（多くはゴシック体）で表示されることになります。見出しの「Handmade 手仕事」のような混植で、前半だけ手書き、後半だけゴシック、という不揃いな見た目が生まれます。

どちらが正解というものではなく、「欧文が主役のロゴ的な見出しなら欧文手書き体＋日本語は別書体」「日本語の文章が主役なら日本語手書き体で統一」と、主役がどちらかで決めます。混植の指定方法は後述します。

日本語対応の手書き系フォントをどう選ぶか

選定の判断軸は4つある

候補が少ないとはいえ、どれを選ぶかで仕上がりは大きく変わります。見るべきは次の4点です。

• ウェイトの本数 — 1ウェイトしかない書体は、見出しと本文で強弱が付けられません。ロゴ・あしらいに限定するか、他の書体と組み合わせる前提になります
• かなと漢字の筆致の一致 — 手書き系では、かなは手書きらしいのに漢字は普通のゴシックに近い、という書体があります。漢字の多い日本語の見出しでは、ここがそろっていないと手書き感が出ません
• 字面の大きさとベースライン — 手書き体は字面が小さめ、重心が不安定なものが多く、ゴシックと同じ font-size だと小さく見えます。並べて使うなら実測して補正します
• グリフの網羅 — 「〜」「々」「①」などの記号・約物が入っていない書体があります。入っていない文字はフォールバックで別書体になるため、記号が多い原稿では確認が必要です

確認は「本番原稿を流して見る」のが一番早い

サンプル文字列の「あいうえお」で選ぶと、本番で裏切られます。推奨の確認手順はこうです。

4ステップ目の容量確認を飛ばすと、公開後にLCPが悪化して戻ってくることになります。日本語フォントは欧文の数十倍の容量になるため、ここは必ず測ります。

Soreiine!!ギャラリーの実例から見る手書きの使いどころ

Soreiine!!のギャラリーで、手書き要素が効いているサイトには共通点があります。それは手書きを「全部」には使っていないことです。

ギャラリーに掲載されているハンドメイド・食品系のサイトを見ていくと、手書き体の出番はおおむね次の3か所に集中しています。

逆に、本文・価格表・フォームのラベル・ボタン文言には使われていません。ここが実例から読み取れるいちばん大きな示唆です。手書き体は可読性を犠牲にして情緒を取る選択なので、読み落としたら困る情報には乗せないという線引きが自然にできています。

もう一点、ギャラリーの実例で効いていた見どころがあります。手書き体の見出しに対して、本文側をかなり素直なゴシックで組んでいる点です。両方に癖を持たせると画面がうるさくなるため、片方を徹底して無個性にすることで手書きの一箇所が立つ。これは配色でアクセントカラーを1色に絞るのと同じ構造です。

掲載サイトの構成の作り方そのものは、こちらの事例記事で分解しています。

リニューアルガイド
ブランドサイト・サービスサイトの参考事例10選｜構成とデザインの決め方
「参考サイトを3つ出してください」と制作会社から言われて、手が止まっていませんか。 きれいなサイトはいくらでも見つかります。ただ、集めたブックマークを並べて…

手書きフォントを実装する

基本の読み込み：必要なウェイトだけを指定する

まずは最小構成です。<head> に次を置きます。

<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=Zen+Kurenaido&display=swap" rel="stylesheet">

ポイントは3つあります。

• preconnect を2本置く — Google Fontsは fonts.googleapis.com（CSS）と fonts.gstatic.com（フォント実体）の2ドメインに分かれています。実体側の preconnect には crossorigin が必要です。付け忘れると接続が再利用されず、効果が消えます
• display=swap を付ける — 読み込み完了までフォールバックフォントで表示します。これが無いと最大3秒ほど文字が見えない状態（FOIT）になります
• ウェイトは使う分だけ — family=Name:wght@400;700 のように書けますが、日本語フォントは1ウェイトで数MBになるため、増やした分がそのまま転送量になります

対応ブラウザは display=swap（font-display 記述子）が Chrome 60+ / Firefox 58+ / Safari 11.1+ / Edge 79+ で、実務上すべての現行ブラウザで使えます。

欧文手書き＋日本語ゴシックの混植指定

欧文を手書きにして日本語はゴシックにしたい場合、font-family の並び順で解決できます。

:root {
  /* 欧文手書き → 日本語ゴシック → システムフォント */
  --font-display: "Caveat", "Noto Sans JP", system-ui, sans-serif;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.3;
  font-weight: 700;
}

なぜこれで動くかというと、font-family は文字単位でフォールバックする仕様だからです。ブラウザは1文字ごとに「最初の書体にこのグリフがあるか」を確認し、無ければ次の書体を見ます。欧文手書き体には A-Z があって漢字が無いので、欧文だけが手書きになり、日本語は自動的に次の Noto Sans JP に落ちます。

この挙動を知っていると「日本語だけゴシックになってしまう」というトラブルが、仕様どおりの動作だと分かります。

日本語の手書き体だけで組む場合のサイズ補正

日本語手書き体は字面が小さめなことが多く、ゴシックと同じ指定だと小さく見えます。font-size-adjust で補正する手もありますが、実務では実測して数値で調整するほうが確実です。

.lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.9;
}

/* 手書き体は同じ 1rem だと小さく見えるので上げる */
.lead--hand {
  font-family: "Zen Kurenaido", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;      /* 実測で10%上げた */
  line-height: 1.95;      /* 字面が上下に揺れるので行間も少し広げる */
  letter-spacing: 0.02em; /* 手書き体は詰まって見えやすい */
}

実装のポイントは、手書き体に切り替えたときに font-size だけでなく line-height と letter-spacing も触ることです。手書き体は1文字ごとのベースラインや字幅が揺れるように設計されているため、ゴシックと同じ行間だと行が接近して見えます。

つまずきやすい点として、letter-spacing を広げすぎると「手で続けて書いた」感が消えます。0.02〜0.05em あたりで止めるのが無難です。

日本語フォントの容量をサブセットで落とす

ここが日本語で手書き体を使う最大の実務課題です。見出し数か所のために数MBのフォントを読み込むのは、LCPに直接響きます。

対処は3つあります。

/* 方法1: text パラメータで必要な文字だけ取得する */
/* 見出しが固定文字列のときに最も効く */

<!-- 「手仕事のある暮らし」だけを手書き体で出す場合 -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&text=手仕事のある暮らし&display=swap" rel="stylesheet">

text= パラメータを付けると、指定した文字のグリフだけを含むフォントが返ります。固定のキャッチコピーやセクション見出しなら、数MBが数KBまで落ちます。URLに日本語を書く形で問題なく動作しますが、エンコードが必要な環境ではパーセントエンコードします。

注意点が1つあります。text= で取ったフォントは指定文字しか持たないため、その書体を他の箇所に使い回すとグリフが無い文字がフォールバックします。CMSで更新される文字列には使えません。

/* 方法2: unicode-range で用途を分ける */
@font-face {
  font-family: "HandLatin";
  src: url("/fonts/caveat.woff2") format("woff2");
  unicode-range: U+0000-00FF; /* 基本ラテンのみ */
  font-display: swap;
}

セルフホストできる場合は unicode-range で範囲を切ると、該当文字がページに無ければそのフォントはダウンロードすらされません。欧文手書き＋日本語ゴシックの構成では効果が大きい指定です。

3つ目は単純ですが効きます。手書き体を画像・SVGにするという判断です。トップのキャッチコピー1か所だけなら、SVGでテキストをパス化したほうがフォント読み込みがゼロになります。更新頻度が低く、文字列が確定している箇所に限って有効です。

読み込み戦略の判断表

どの手を取るかは、更新頻度と使用箇所で決まります。

この表でいちばん重要な行は最後です。「本文に手書き体」は、容量と可読性の両方で損をします。

テクニック Googleフォントおすすめ日本語フォント10選と使い方【2026年版】 手書き風の日本語フォントを無料で使いたい。Googleフォントで探すと候補は出てくるものの、「本文に使っていいのか」「どれが読みやすいのか」の判断がつかない…

手書きフォントを使ってはいけない場所

手書き体は雰囲気を作る代わりに、情報の伝達精度を落とします。CV（コンバージョン）に関わる箇所で使うと、数字で跳ね返ってきます。

避けるべき箇所を整理します。

• ボタン・CTAの文言 — 「購入する」「お問い合わせ」が読みにくいと、クリック前の一瞬のためらいが生まれます
• 価格・数量・日付 — 数字の判別は手書き体がもっとも弱い領域です。「0と6」「1と7」が紛れます
• フォームのラベル・エラーメッセージ — 入力中のユーザーは文字を速く読む必要があり、装飾が邪魔になります
• 長文の本文 — 読み疲れが早く、離脱につながります
• 法務・規約・注意書き — 読みにくい表記で不利な条件を示す形は、信頼を損ないます

CV導線のどこで止まるかという話は、こちらで整理しています。

デザイン
CV導線の作り方｜CVが止まる3か所と直す順番
CV導線を直したいとき、最初にやることはボタンの改修ではありません。CTAまで到達しているのにクリックされていないのか、そもそも到達していないのかを計測で切…

逆に、手書き体が力を出す場所も明確です。ブランドの温度を伝えたい一行、スタッフの声、手描きの矢印や囲みといったあしらい。ここは他の手段では代替しにくい効果があります。

レイアウト側の構造で温度感を作る手もあり、スプリットレイアウトの作り方｜CSSコードと判断基準【2026年版】で解説しているような大胆な面の分割は、フォントに頼らずに個性を出せる選択肢です。手書き体の採用を検討する前に、構造で解けないか一度考える価値があります。

検索流入から見た「手書きフォント」需要の実態

Soreiine!! Magazineの計測データ（2026-09-07〜2026-10-05）で、「グーグルフォント 手書き」は表示回数10回・クリック数0回・平均掲載順位8.2位・CTR 0.0%という状態でした。

この数字から読み取れることが2つあります。

1つは、順位8.2位は1ページ目の下部で、クリックが取れない位置だということ。表示はされているのに0クリックという結果は、この順位帯では珍しくありません。1ページ目に入っているかどうかではなく、上位3〜5位に入るかどうかで流入が決まります。

もう1つは、表示10回という数字が示す需要の規模です。この語単体の検索量は大きくありません。ただ「手書き フォント 日本語」「google fonts 日本語 手書き」といった周辺語を含めると、探している人は一定数いる領域です。単語1つの数字で判断せず、関連語を束ねた塊で見るのが実務的な読み方になります。

8位台でCTRが0%なら、タイトルの手直しより先に中身の網羅性を上げるほうが効きます。順位が上がれば、タイトルは同じでもクリックは付いてきます。

よくある質問

Google Fontsの手書きフォントは商用利用できますか

Google Fontsに掲載されている書体は、オープンソースライセンス（多くはSIL Open Font License）で提供されており、商用サイトでも利用できます。ただしライセンスの種類は書体ごとに異なるため、各書体のページでライセンス表記を確認してください。Webフォントとしての配信だけでなく、ロゴ化や画像への書き出しを行う場合は、ライセンス条項をより慎重に読む必要があります。

日本語の手書きフォントはなぜ選択肢が少ないのですか

日本語フォントは漢字・ひらがな・カタカナ・記号を含めて必要なグリフ数が膨大で、1書体を完成させる工数が欧文とは桁違いになります。手書き風は1文字ごとに揺らぎを設計する必要があるため、さらに手間がかかります。この構造上、無料公開される日本語の手書き体は少数にとどまっています。

欧文の手書きフォントを指定したら日本語がゴシックになりました

これはCSSの仕様どおりの動作です。font-family は文字単位でフォールバックするため、指定した欧文手書き体に漢字・かなのグリフが無い場合、次に書いた書体で表示されます。日本語も手書きにしたいなら、font-family の先頭に日本語の手書き体を置いてください。

日本語フォントの読み込みが重い場合はどうすればいいですか

文字列が固定なら、Google Fontsの text= パラメータで必要な文字だけを取得するのが最も効きます。数MBが数KBまで落ちます。更新される文字列なら display=swap でフォールバック表示を優先し、使用箇所を見出しだけに絞ってください。キャッチコピー1か所だけなら、SVGでパス化してフォント読み込みを無くす判断もあります。

本文に手書きフォントを使うのは避けるべきですか

避けたほうが無難です。長文での可読性が落ちて読み疲れが早まるのと、日本語フォントの容量がそのまま読み込み時間に乗ってくるという2つの理由があります。手書きの温度感を出したいなら、キャッチコピーやリード文の一か所に絞り、本文は素直なゴシックで組むほうが結果的に手書きの一箇所が立ちます。

まとめ

Google Fontsの手書き体を日本語サイトで使うときの判断は、次の順番で固まります。

1. Language: Japanese で一覧を目視する — Handwritingカテゴリだけで絞ると候補を取りこぼします
2. 本番原稿を流して確認する — サンプル文字列では、かなと漢字の筆致の不一致や記号の欠けが見えません
3. 使う場所を見出し・リード・あしらいに限定する — ボタン・価格・フォームには乗せません
4. 読み込み方を更新頻度で決める — 固定文字列なら text= かSVG、更新されるなら display=swap
5. サイズ・行間・字間を実測で補正する — ゴシックと同じ数値では小さく、詰まって見えます

Soreiine!!ギャラリーの実例が示しているのは、手書きが効いているサイトは手書きを一箇所に絞っているということです。全面に広げるとただ読みにくいサイトになり、一箇所に絞ると「人が作っている」という手触りが残ります。この加減が、手書き体を使うか使わないかより大事な判断になります。

サイト全体の構成をどう組むかという視点では、こちらの事例記事も参考になります。

リニューアルガイド
特設・プロモーションサイトの参考事例8選｜構成・デザイン・費用の決め方
「特設サイトを作りたい」と社内で決まったものの、いざ制作会社に相談しようとすると手が止まる。何ページ必要なのか、どんな見せ方があるのか、それでいくらかかるの…