日本語Webフォントは重い？手書きフォントを高速表示する方法【WordPress】

メイリオなどデフォルトのフォントは読みやすいけど単調。
特にテーマが被ると、少々のカスタマイズでは被って見えます。
ちょっと変化をつけてみたかったので手書き文字風フォントを採り入れてみました。

……しかし、

「サイトが重くなる」という大問題が！

でも、色々対処した結果、なんとか従前と体感変わらないくらいで導入することができました。
その方法を以下に紹介します。

なお、手書きフォントに限らず、日本語WEBフォント全般で応用できます。
（※ただし、フォントのライセンスが加工可である条件）

結論

最初に結論です。

日本語Webフォントは「使う場所を絞れば」実用できます

本文全部に使うのではなく、サイトタイトル・見出し・ナビなど固定文言に絞ります。
その上でサブセット化してwoff2で読み込みます。
これで表示速度への影響はかなり抑えられます。

なぜ日本語フォント（手書きフォント含む）は重いのか

そもそも、

どうして日本語フォントは重いの？

この説明をします。

シンプルに、

日本語は文字数が多いからです
そのためフォントファイルが必然的に大きくなります

じゃあ多いなら削って少なくすればいいってことだね！

この削る作業のことを「サブセット化する」といいます。

フォントのサブセット化:
フォントファイルから使用する文字だけを抽出して軽量化する技術

当然ながら使用する文字が少なければ少ないほど軽量化できます。
この点につき、詳しくは後述します。

手書き文字風フリーフォントを選ぶ

手書き風フォントでメジャーなのは、この辺りです。
いずれも無料で利用できますが、商用利用およびサブセット化の可否については、必ず配布サイト様の利用規約を直接御確認ください。

特に「ふい字フォント」は御注意ください。
公式配布サイトは終了しており、実質的に「メンテ終了フォント」となっています。
現在もVector側で配布自体は継続されていますが、その点を踏まえた上で利用することをおすすめします。

ふい字フォント
http://hp.vector.co.jp/authors/VA039499/
たぬき油性ゴシック

たぬきフォント

フリーフォント公開中

http://tanukifont.com

あんずもじ

あんずいろapricot×color

http://apricot.ciao.jp

Yomogi

Yomogi – Google Fonts

Yomogi is extra thin hand writing font that is easy to read and makes a strong impression. It includes Google Latin Plus, hiragana, katakana, JIS level 1 and 2

http://fonts.google.com

【2026年5月23日追加】
「あんずもじ」と「Yomogi」を追加しました。

手書きフォント導入完成見本

トップページはこんな感じ（記事執筆当時、「黒板」をイメージしていました）。

かなり柔らかい雰囲気になったのではないかと思っています。

以下、作成編と設置編の二つのパートにわけて説明します！

作成編

大雑把には、フォントをWEBフォント化して定義します。
しかしそのまま使うと重いです。
そのため使う文字だけに絞り込み、その上でサブセット化します。

１　使う文字を絞り込む

始めにサイトデザインから決める

まず通常のフォントで文章含むブログサイトのデザインを施してから、どこに使うかを決めます。

これはフォントファイルを軽量化するためです

よく見かけるサブセット化の説明は、ブログ全体に適用することを前提としたものです。
第一水準漢字まででファイルを作る形で説明していますが、サイズはまだまだ大きめ。
実際に試してみるとわかりますが、かなり重いです。

もし本文内の見出しなどにも使うなら、第一水準漢字まで入れる方法で構わないと思います。
適用する文章が、その度変わるので。

私の適用した箇所　～あまり変更しない箇所のみに絞るのがベスト

ただ個人的にはですが、

「あまり文章を変えないところのみ」に適用することを推奨します

私の変更した箇所は、

タイトル
サイト説明
グローバルナビ
サイドバーH4見出し
トップページH2見出し（「私の小説～拡散お願いします」の部分です、固定ページ利用）

サイトが重くなるとgoogleからの評価が落ちますし、訪問者の利便性も落ちますので。

２　サブセット化

サブセットフォントメーカーというソフトを利用します。
下記リンクからダウンロードしてインストールしてください。

TuZbgtHg[J[

http://opentype.jp

起動します。
画像の通り入力してください。

使う文字はサイトからコピペして入力していくのが早いです。

作成開始を押すとファイルができあがり、WOFFコンバータが起動します。

チェックを確認して「変換開始」を押すとフォントファイルのできあがりです。

３　ファイルアップロード

woffとwoff2の2ファイルをアップロードします。
子テーマ内に「fonts」フォルダを作ってアップロードすると管理しやすくなります。

導入編

フォントを読み込んで設定します。

基本：style.cssに直接@font-faceで定義づける。

しかし、この方法を採ると重くなりがち。
解決法は、

cssファイルを別個に作って非同期で読み込ませます

以下、その方法を説明します。

1　新しいcssファイルを作る

名前は何でもいいのですが、ここではhuimin.cssとでもしておきます。
（以下、huiminと書かれた部分は、コード内の記述も含めて、好きに変えて下さい）
huimin.cssの中身に、次の記述をします。

@font-face {
font-family: “huimin”;
src:
url(‘./fonts/huimin.woff2’) format(‘woff2’),
url(‘./fonts/huimin.woff’) format(‘woff’);

font-display: swap;
}

フォントファイルを子テーマのfontsフォルダに入れた例です。
保存して、子テーマフォルダ直下にアップロードします。

2　style.cssでフォントを適用する

ここは人によって違いますが、私の例を挙げておきます。
テーマがLuxeritasの場合はそのまま流用できます。

/************************************
**　フォント変更
************************************/
/*サイトタイトル */
.sitename {
 font-family: 'huimin' ;
}
/*サイト説明 */
#head-in .desc{
 font-family: 'huimin' ;
}
/*サイドバー */
#side h4{
font-family: 'huimin' ;
}
/*グローバルナビ */
#gnavi{
 font-family: 'huimin' ;
}

huiminのところは、先のhuimin.cssで指定した名前です。

@font-face {
 font-family: "huimin";
}

反映されなければ「!important」をつけてみてください。
またキャッシュ消去なども試してみてください。

3　ヘッダーにコードを記述する

基本的には非同期で読み込ませます

次のコードを記述してください。
CSSファイル名は各自の名前に変更してください。

<link rel="stylesheet" href="https://（ファイルまでのパス）/huimin.css" media="print" onload="this.media='all'">

４　読み込み方法における注意点

前項につき、

必ずしも非同期で読み込ませるのが正しいわけではありません

本記事において説明した方法においては、次のコードを用いています。

 font-display:swap;

swapは本命のフォントが表示されるまで代替フォントで表示するもの。
サイト速度を優先したい場合における定番コードです。

しかしswapにはデメリットもあります。
ちらつきが発生することもありますし、CLSを悪化させることもあります。

ここは私の個人サイト、しかも高速化と軽量化を突き詰めるサイトですから、基本的にCSSは非同期で読み込ませます。
しかし企業サイトですとちらつきは避けたいところ。
私にしてもお仕事で使うなら同期で読み込ませます。
体感で不便を感じなければ、それでいいと割り切ります。

どんな方法で読み込みするかは、適用するサイトの性格に応じて判断してください

なおWEB制作の現場では、media=”print” onload=”this.media=’all’を使った読み込みは古くなりつつあります。
主流なのはpreloadを使った読み込みです。

<link rel="preload" href="/fonts/example.woff2" as="font" type="font/woff2" crossorigin>

ただpreloadも使い方が難しいので、本記事では方法を紹介するにとどめておきます。

まとめ

手書きフォントにしろ、日本語Webフォントにしろ。
本記事の方法を採ることで、表示速度への影響はかなり抑えられます。
大事なのは「どこに使うかを先に決めること」。
使う場所を絞ることで、最大効率でのサブセット化ができます。

一方で、フォントは単なる装飾ではなく、サイト全体の雰囲気にも大きく影響します。
だからこそ難しい。
デザインを優先すれば重くなりやすいですし、速度だけを追えば味気なくなります。

結局のところ、大事なのは「どこでバランスを取るか」です。
私自身も試行錯誤を重ねた結果、必要なところだけ絞り込む形に落ち着いています。

サイトの目的に見合った、自分なりのベストバランスを探してみてください！

WRITTEN BY

天満川鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X CodePen Amazon

KUSANAGI ON VPS

VPSは、もう「黒い画面」だけじゃない。

「VPSは難しそう」と諦めていませんか？ ConoHaのKUSANAGIなら、ブラウザ上の管理画面（KUSANAGI Manager）で、ドメイン設定からSSL発行まで直感的に操作可能です。

コマンド操作なしで世界最速級の環境を構築できる、今の時代の初心者にとっての最適解。私が長年愛用している理由がここにあります。

※当サイト経由で新規申し込みいただくと、特典として1000円分のクーポンをもらえます。

公式サイトで詳細を見る