日本語Webフォントとは?欧文より重い理由と軽く使う工夫を解説

日本語Webフォントと欧文Webフォントの違い

まずは2つのWebフォントが何を指すのか、そしてなぜ重さに大きな差が出るのかを押さえましょう。

日本語Webフォント・欧文Webフォントとは

Webフォント(ページ表示時にサーバーからダウンロードして使うフォント)は、収録している文字の種類によって大きく2つに分けられます(Webフォントの仕組みそのものはWebフォントとは?で解説しています)。

アルファベット・数字・記号を中心に収録したものが「欧文Webフォント」、ひらがな・カタカナ・漢字を収録したものが「日本語Webフォント」です。

日本語Webフォントは、日本語の文章に英数字が混ざることを前提に、アルファベットや数字もあわせて収録しているのが一般的です。

一方、欧文Webフォントにはひらがなや漢字は入っていません。

日本語Webフォントが重い理由は文字数

日本語Webフォントが重くなる一番の理由は、収録しなければならない文字の数が桁違いに多いことです。

英語の文章は、大文字・小文字のアルファベットと数字、記号を合わせても、基本の文字は100字ほどで書けます(コンピューターで使う基本の英数字・記号のセット「ASCII」で表示できる文字は95字です)。

一方、日本語は、ひらがな・カタカナに加えて、一般的な文章で使う漢字の目安である常用漢字だけでも2,136字あります。

実際の日本語フォントは、人名・地名などの漢字や記号も含めるため、収録する文字が1万字を大きく超えることも珍しくありません(Adobe Fonts「Dynamic subsetting」(英語)でも、東アジアのフォントはほとんどの場合1万字を大きく超えると説明されています)。

上の図のように、欧文の基本の文字のバーはほとんど見えないほど短く、日本語フォントとは比べものになりません。

文字が多いほどフォントのファイルは大きくなるので、ファイルサイズにもそのまま差が出ます。

たとえば、Google FontsがGitHubで公開している元ファイル(英語)では、全ウェイト(文字の太さ)を1つにまとめた形式で比べると、日本語書体のNoto Sans JPは約9MB、欧文書体のRobotoは1MBに満たない大きさです。

そのまま使うと表示が遅くなる

日本語Webフォントをそのまま読み込むと、数MBものデータをダウンロードし終えるまで、指定した書体で文字を表示できません。

通信の遅いスマートフォンでは、文字が表示されない時間や、途中で書体が切り替わる時間が長くなり、読む人のストレスにつながります。

ページを開いたとき、しばらく文字が見えず後からまとめて表示されたり、最初は普通のゴシック体だった文字が途中でパッと別の書体に切り替わったりするのを見たことはないでしょうか。前者は「FOIT(フォイト)」、後者は「FOUT(ファウト)」と呼ばれ、どちらもWebフォントの読み込みを待っている間に起きる現象です。

どちらの見え方にするかはCSSのfont-displayという指定で選べます。Google Fontsでコピーできる読み込みのコードには、はじめからdisplay=swap(先に端末のフォントで表示し、読み込めたら切り替える指定)が付いています(font-displayの値ごとの違いはWebフォントの読み込み速度とは?で解説しています)。

そのため日本語Webフォントは、「必要な文字だけを読み込む」「使う場所を絞る」といった工夫とセットで使うのが基本です。

日本語Webフォントを軽く使う工夫

ここでは、日本語Webフォントの重さを抑えるための代表的な工夫と、欧文Webフォントとの組み合わせ方を紹介します。

サブセット化で必要な文字だけにする

サブセット化とは、フォントに収録された文字の中から、実際に使う文字だけを抜き出してファイルを小さくすることです。

「サブセット」は「一部分」という意味で、1万字以上ある日本語フォントから、ページで使う文字だけを取り出すイメージです。

サブセット化には、大きく分けて次の3つのやり方があります。

やり方	内容	向いている場面
使う文字だけを抜き出す	ツールを使って、使う文字だけを含んだフォントファイルを自分で作る	ロゴや見出しなど、使う文字が決まっている場合
文字を範囲ごとに分けて配信する	フォントを多数の小さなファイルに分け、ページで使う文字を含むファイルだけを読み込ませる	本文など、使う文字が事前に決まらない場合
ページに合わせて自動で抜き出す(ダイナミックサブセット)	フォントサービス側が、ページの文字を調べて必要な文字だけを配信する	サービスの仕組みに任せたい場合

2つ目のやり方は、CSSのunicode-rangeという指定を使います(MDN「unicode-range」)。

Unicode(ユニコード)とは、世界中の文字に番号を割り振った共通のルールで、unicode-rangeでは「このファイルはこの番号の範囲の文字を担当する」と指定できます。

たとえば、ひらがなとカタカナだけを担当するファイルは、次のように書けます。

@font-face {
  font-family: "MyJP";
  src: url("myjp-kana.woff2") format("woff2");
  unicode-range: U+3040-309F, U+30A0-30FF;
}

U+は「Unicodeの番号」という印で、後ろの英数字が文字の番号(16進数)です。U+3040-309Fは「3040番から309F番まで」という意味で、この範囲がひらがな、U+30A0-30FFがカタカナの範囲です。

ブラウザはページの中にこの範囲の文字があるときだけ、このファイルをダウンロードします。

Google Fontsの日本語書体もこの方法で配信されていて、たとえばNoto Sans JPの標準の太さ1つだけでも、執筆時点で100を超える小さなファイルに分けられていました。

ページで使っている文字を含むファイルだけが読み込まれるので、フォント全体を丸ごとダウンロードするよりずっと軽く済みます。

上の図では、紺色のファイルだけがダウンロードされ、グレーのファイルは使う文字が無いので読み込まれません。

3つ目のダイナミックサブセットは、Adobe Fontsなどのフォントサービスが採用している方法です。Adobe Fontsの場合は、ページに埋め込んだJavaScript(ブラウザで動くプログラム)がページの中で使われている文字を調べ、その文字だけを含むフォントをサーバーから受け取ります。ページの文字が後から増えても、足りない文字だけを追加で取りに行く仕組みです。

なお、自分でフォントを加工してサブセットを作る場合は、無料のフォントであっても、そのフォントのライセンスで加工(改変)やWebフォントとしてサーバーに置いて配信することが許可されているかを必ず確認しましょう(確認のポイントはフォントライセンスとはで解説しています)。

使う場所を見出しなどに絞る

日本語Webフォントを軽く使うもう1つの方法は、Webフォントを使う場所そのものを絞ることです。

文字数の多い本文はデバイスフォント(端末にもともと入っているフォント)のままにして、見出しやキャッチコピーなど、書体で印象を出したい場所だけに日本語Webフォントを使います。

デバイスフォントはiPhoneやWindowsのパソコンなどに最初から入っているので、ダウンロードが発生せず、すぐに表示されます。その代わり、OSによって使われる書体が違うため、見た目が少し変わります。Webフォントはどの端末でも同じ書体で表示できますが、ダウンロードの時間がかかります。

見出しは文字数が少ないので、必要な文字だけを読み込む工夫とも相性が良い場所です。

たとえばGoogle Fontsには、読み込みの指定にtext=というパラメーター(追加の条件)を付けると、指定した文字だけを含むフォントを返してくれる機能があり、公式ドキュメントではファイルサイズを最大90%減らせる場合があると説明されています(Google Fonts「Get Started with the Google Fonts API」(英語))。

ただしこの方法は、指定した文字以外は表示できないため、文章が変わらないロゴや固定の見出し向けです。

欧文Webフォントと組み合わせる

日本語と英数字が混ざる文章では、英数字の部分だけに欧文フォントを使うと、見た目を整えやすくなります。

このように和文(日本語)と欧文を1つの文章の中で組み合わせることを「和欧混植(わおうこんしょく)」と呼びます(和文書体・欧文書体それぞれの特徴は和文書体の基本とは?・欧文書体の種類とは?で解説しています)。

CSSのfont-familyでは、書いた順番に書体が探され、その書体に無い文字は次の書体で表示されます。

この性質を使って、欧文フォントを先に、日本語フォントを後に書くと、英数字は欧文フォント、ひらがなや漢字は日本語フォントで表示されます。下の例で「Web制作」と書いた場合、「W」「e」「b」は1つ目のMyLatinに入っているのでMyLatinで表示され、「制」「作」はMyLatinに無いので次のMyJPで表示されます。

body {
  font-family: "MyLatin", "MyJP", sans-serif;
}

逆に日本語フォントを先に書くと、日本語フォントに入っているアルファベットが優先されるため、欧文フォントは使われません。

実際に、同じ文章で順番を入れ替えてみると違いが分かります。

左の見本では英数字も日本語フォントに入っている文字で表示され、右の見本では英数字だけが欧文フォントで表示されています(閲覧環境に指定の書体が無い場合は、差が出ないこともあります)。

欧文フォントは英数字のために作られているので、右のように組み合わせると、英単語や数字の形がより整って見えることが多いです。

ただし、和文と欧文では文字の大きさや太さの見え方が違うことがあるので、組み合わせたら必ず実際の文章を並べて、英数字だけ浮いて見えないかを確認しましょう。

また、英数字には軽い欧文Webフォントを使い、日本語は端末のフォントのままにする、という組み合わせ方なら、重い日本語Webフォントを読み込まずに見た目を整えられます。

実践のポイント

日本語Webフォントを使うときにありがちな失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 日本語Webフォントの重さを意識せず、全ページの本文にまで適用してしまうことがあります。
  まずは見出しなどに使う場所を絞り、本文に使う場合はサブセット化や分割配信をしているサービスを選びましょう。
• 欧文Webフォントと同じ感覚で、日本語Webフォントのウェイト(太さ)を何種類も読み込んでしまうことがあります。
  太さの違いはCSSで文字を太らせているのではなく、太さごとに別の文字の形のデータを持っているため、多くの場合、ウェイトを1つ増やすと1万字分を超える文字のデータがもう1セット加わります。日本語フォントはウェイトが1つ増えるだけでも負担が大きいので、使う太さは2種類程度に絞るのがおすすめです。
• 欧文フォントと日本語フォントのfont-familyの順番を逆に書き、欧文フォントが使われていないことに気づかないことがあります。
  欧文フォントを効かせたいときは、欧文フォントを先に書きましょう。
• 自分でサブセット化したフォントに、後から記事を追加した際の新しい文字が含まれておらず、その文字だけ別の書体で表示されてしまうことがあります。
  使う文字が増える場所には、範囲ごとに分けて配信する方法やダイナミックサブセットを選びましょう。

よくある質問

• Q. 日本語Webフォントは使わないほうがいい?
  A. 使わないほうがいいわけではありません。
  重さを理解したうえで、見出しなど効果の大きい場所に絞ったり、分割配信やサブセット化の仕組みがあるサービスを選んだりすれば、表示速度への影響を抑えながら使えます。
• Q. 欧文Webフォントだけ使うのはあり?
  A. ありです。
  欧文Webフォントはファイルが小さいので、英語の見出しや数字の部分だけ欧文Webフォントにして、日本語は端末のフォントに任せる方法は、軽さと見た目のバランスが取りやすい方法です。
• Q. 日本語Webフォントの書体はどこで探せばいい?
  A. 無料で使えるものならGoogle Fonts、有料のものならAdobe Fontsや国内のフォントメーカーのWebフォントサービスなどで探せます。
  サービスごとに日本語書体の数や配信の仕組みが違うので、使う前に比べてみましょう(主なサービスの違いはGoogle Fontsとは?で解説しています)。

まとめ

日本語Webフォントは、ひらがな・カタカナ・漢字を収録するため、英数字中心の欧文Webフォントより文字数がはるかに多く、ファイルも大きくなります。

そのため、必要な文字だけを読み込むサブセット化や分割配信、使う場所を見出しに絞るといった工夫とセットで使うのが基本です。

英数字には欧文フォントを先に指定して組み合わせると、軽さと見た目の両方を整えやすくなります。

まずは自分のサイトで日本語Webフォントをどこに使っているかを書き出し、本文まで使っているなら、見出しだけに絞れないか検討してみましょう。