日本語Webフォントの神「Google Fonts + 日本語」の使い方
代表取締役
児島 大
フォントの種類は、端末やOSのバージョンごとに異なっています。
そのため、同じWebサイトだとしても、異なる端末で見ると、違うフォントで表示されていることが多分にあります。
フォントはデザインの大きな部分を占める要素のひとつでもあります。
フォントが違えばサイト自体の印象も異なるものになってしまいまうだけでなく、場合によっては、デザイン崩れなどにより意図しないデザインになってしまうこともあるのです。
Webフォントを使うと、端末に依存することなくWebサイトを同じフォントで表示することができるようになります。
この記事では、数少ない日本語Webフォントの代表「Google Fonts + 日本語」の使い方を解説していきます。
目次
Google Fonts + 日本語とは
Google Fonts + 日本語とは、Googleが提供をしているオープンソースの日本語Webフォントです。
2016年頃から、日本語フォントはEarly Access（ベータ版）として提供されてきましたが、2018年8月に正式リリースとなっています。
Webフォントの仕組み
通常のフォントが端末にインストールされているフォントを表示させるのに対し、Webフォントはインターネット上からフォントをダウンロードして表示させています。
そのため、どの端末でも同じフォントで表示されるのです。
日本語Webフォントの導入ハードル
Webフォントは、どの端末でも同じフォントで表示されるという素晴らしいものではありますが、日本語 Webフォントの場合には導入するためのハードルがあがってしまいます。
欧文フォントの場合には、アルファベット・数字・記号で、文字数はせいぜい100文字くらいです。
しかし、日本語フォントの場合には、ひらがな・カタカナだけで濁点・半濁点・拗音も含めて約170文字もあります。
さらに、漢字は、常用漢字までで約2000文字近くあるわけです。
つまり、ユーザーがページにアクセスしてきた際に、このフォントをダウンロードしているわけですから、それだけページのロード時間が長くなってしまうのです。
しかし、このGoogle Font + 日本語に関しては、比較的早い速度でフォントを表示させることができる仕組みになていますので、次項で詳しく解説していきます。
Google Font + 日本語の表示が早い理由
Google Font + 日本語では、数の多い日本語フォントをすべてダウンロードするのではなく、ページ内の文字を表示できる最小限のダウンロードのみで利用できるような仕組みになっています。
具体的には、公式サイトのリリースがありますので引用して説明いたします。
Google Fonts’ innovative delivery system circumvents this problem by splitting the large fonts into roughly 100 “slices” based on an analysis of online language patterns.
Google Fonts launches Japanese support—and makes loading large fonts even faster
引用の通り、Googleは膨大なオンライン上の言語パターンを分析して得られたデータに基づいて、日本語の文字を100以上のブロックに分割しています。
そして、その100以上のブロックの中からページの表示に必要なブロックのみをダウンロードするという仕組みで、Webフォントの表示高速化を図っています。
Google Font + 日本語の使い方
日本語のみの絞り込んだGoogle Fontsのサイトにアクセスします。
本記事執筆時点では、8つのWebフォントが利用できます。
利用したいフォントの［＋］アイコンをクイックします。
画面右下に表示される［1 Family Selected］をクリックします。
ポップアップが表示されるので<link>要素を、Webフォントを利用したいページの<head></head>内にコピペします。
あとは、CSSにfont-familyを指示のとおりに設定するだけです。
例えば、ページ内すべてのフォントに利用するのであれば以下のようにbodyにfont-familyを記述します。
body {
font-family: 'M PLUS 1p', sans-serif;
}