Google Noto Fontsの使い方やメリット・デメリットを解説

Google Noto Fontsの使い方やメリット・デメリットを解説

スポンサーリンク

スポンサーリンク

webサイトを構成するものの中で、最も重要だと言っても過言ではないのがフォントです。

フォントがもたらす影響は、

  • コンテンツの文章が読みやすいか読みにくいかといった可読性
  • サイト全体のデザインセンスや統一感

にも深く関係してきます。

言ってみれば、webサイトの核とも言えるのがフォントというわけですね。

本記事では、Google Fontsに関連する、以下の3点について説明していきます。

Google Fontsのメリット

パソコンやブラウザといった閲覧者の環境に左右されずに指定したフォントを表示することが出来るのが、Google Fontsです。

つまりはどういうことかと言うと、例えばGoogle Fontsには「Noto Fonts」というフォントセットが存在します。

世界の言語をNoto Fontsで実現

ひと昔前の時代、豆腐文字(□)と呼ばれたり、ゲタ(〓)と呼ばれるような読むことが出来ない文字が表示される、ということが頻繁にありました。

 

これらは表示しようとしている文字のフォント(文字コード)が、閲覧しているパソコンやブラウザ、もしくは携帯電話といった媒体に対応していなかったことが原因の、いわゆる文字化けと呼ばれる現象です。

豆腐文字とゲタ

こうした文字化けを解消し、世界中の言語を文字化けすることなく表示させようという試みの元、GoogleとAdobeによって開発されたのが、「Google Noto Fonts」です。

豆腐文字を無くす=No more tofu=Noto

というわけですね。

Google Noto Fonts

無料で利用できる日本語Notoフォント

日本語に対応しているNoto Fontsは、

  • Noto Sans JP
  • Noto Sans Japanese

で、それぞれには以下のような特徴があります。

Noto Sans JPの特徴

NotoSansJP

僅か数十字ですが、Noto Sans Japaneseに比べ表示することが出来るフォントが多いのが特徴です。

太さは

  1. Thin
  2. Light
  3. Demi Light
  4. Regular
  5. Medium
  6. Bold
  7. Black

の7種類です。

Noto Sans Japaneseの特徴

NotoSansJapanese

文字の太さを、CSSによるfont-weightの値により変更することが出来るのが特徴です。

太さを示す値は一番細いもので100、太いもので900まで、9種類の太さによる表現が可能という、痒いところに手が届く日本語の表現が可能なのが有難いですね。

こちらのNoto Sans Japaneseは、近いうちに全てのUnicodeに対応する予定とのことです。

Google Fontsの使い方

それでは、Google Fontsを実際にwebサイトに導入する方法を説明していきます。

と言っても、必要なのはHTMLとCSSファイルに各コードを追記(コピペ)するだけなのでとても簡単です。

日本語に対応している「Noto Sans JP」と「Noto Sans Japanese」の導入方法を記載します。

Noto Sans JPの使い方

HTMLファイルでlinkタグとして読み込む場合は以下のコードを<head>内に記述します。

CSSファイルで@importとして読み込む場合は、CSSファイルの中に以下のコードを記述します。

HTMLファイルで読み込む場合も、CSSファイルで読み込む場合も、共通して以下のコード(font-family)をスタイルとして読み込む必要があります。

Noto Sans Japaneseの使い方

HTMLファイルでlinkタグとして読み込む場合は以下のコードを<head>内に記述します。

CSSファイルで@importとして読み込む場合は、CSSファイルの中に以下のコードを記述します。

HTMLファイルで読み込む場合も、CSSファイルで読み込む場合も、共通して以下のコード(font-family)をスタイルとして読み込む必要があります。

Google Fontsのデメリット

厳密には「Google Noto Fonts」のデメリットとなります。

デメリットとして考えられるのは、表示する速度が遅くなってしまうということです。

Noto Fontsは日本語に対応していると説明しましたが、

  1. ひらがなの五十音順すべての文字
  2. カタカナの五十音順すべての文字
  3. 6000文字以上の漢字

という、対応している全ての日本語を読み込む必要があるのです。

アルファベットであれば大文字26文字と小文字26文字の合計52文字で事足ります。

ですが日本語ともなると、ひらがなだけで五十音順全ての文字となる48文字と、「ゃゅょ」等の小文字、「がぎぐげご」等の濁音、「ぱぴぷぺぽ」等の半濁音、「ゐゑ」等の旧字体の合計83文字。

そしてカタカナがひらがなの83文字に「ヴヵヶ」3文字を追加した86文字。

漢字ともなると6000文字以上と、アルファベットに比べて100倍以上の文字数を読み込む必要が出てくるので、読み込んでいる間の時間が僅か数秒と言えども長くなり、それが表示速度の遅延に繋がるのです。

解消方法?

では、Google Noto Fontsの表示速度が遅くなってしまうというデメリットの解消方法はないのでしょうか。

せっかく日本語に対応しているNoto Fontsも表示速度と天秤にかける必要があり、利用を諦めないといけないときがあるのでしょうか。

この問題を解消する方法は現在のところありませんが、希望論については語ることが出来ます。

言わずと知れた「キャッシュ」によるNoto Fontsの記憶です。

一度でもNoto Fontsが利用されているwebサイトを訪れているブラウザであり、尚且つキャッシュを残さない設定にしていないブラウザであれば、Noto Fontsを利用しているwebサイトを閲覧したときでもスムーズに表示されます。

諸刃の剣とまでは言いませんが、

  • Noto Fontsによる文字の見やすさと美しさを取るか
  • ページの表示速度を取るか

どちらかを選択する必要があるということですね。

Google Noto Fontsまとめ

webサイトに導入するには、コードを追記するだけという簡単なGoogle Noto Fonts。

表示速度が遅いという欠点がありますが、言ってみればこれは日本語を如何に美しく、さらには如何に読みやすく表示させようとしているかの表れではないかと思うのです。

世界にはたくさんの言語が存在していますが、中でも特に難しいと言われているのが日本語です。日本人の方であればわかるかと思いますが、それはもう多種多様な表現方法が、日本語にはありますよね。

それらの表現方法を、他言語を利用する人にも、日本語が持つ意味をそのまま伝えることが出来るようになる可能性が、Google Noto Fontsには秘められているとは思いませんか?

「世界中の情報を整理し、世界中の人々がアクセスできて使えるようにすること」というGoogleの使命が、Google Noto Fontsには込められているのではないでしょうか。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク