明朝体ウェブフォントも増えたしデバイスフォントバイバイ！！！

Google Fontsで扱う日本語Webフォントが増えましたね！！デザイナーさんには是非活用して欲しいので今更ではありますがお手軽に使えるGoogle Fontsについてまとめてみました。

Webフォントだぞ

まずはWebフォントって何？というところからおさらいしましょう。

デバイスフォントって？

デバイスフォントはその名の通り、閲覧者の端末(デバイス)にインストールされているフォントを指します。

Webページを表示する際、テキストは閲覧している端末にあるフォントを使用して表示しています。その為、指定したフォントが端末に無い場合は別のフォントで置き換えられたり…結果デザインが崩れてしまうことも。どの端末でも同じフォントで表示して欲しい！そんな時に使えるのが、Webフォントです。

※もちろんページ表示の際に読み込むのでデバイスフォントよりは重くなるので必ずしもWebフォントが良いわけではありません※

Webフォント

Webフォントはサーバー上にフォントファイルを置くことで全ての端末で同じフォントを表示させることができます。形式が異なる点や、著作権の問題からこれまで使用していたフォントがそのまま使えるわけではありませんが、今はWebフォントを提供するサービスが数多くあります。特に英語はデザインの雰囲気に合わせて自由に選ぶことが出来ると思います！

しかし英語に比べ日本語はとにかく文字の種類が多い！

アルファベットは最低で26文字+数字。しかし日本語は常用漢字だけでも2136文字…これはフォント自体作るのが大変です。そんな大変な日本語をWebフォントとして無料で提供してくれているサービスは限られているのです。

※有料のサービスを含めるとより選択肢は広がります！※

そこでGoogle Fonts

2014年からGoogleが提供する”Google Fonts”でも日本語が提供されるようになりました。Google FontsはGoogleのサーバー上にフォントファイルがあるので、下記サイトから使うフォントを選び読み込みコードをコピペするだけで使えます。しかも無料！

[Google Fonts](https://fonts.google.com/)

Noto Fonts

Google Fontsの中でも弊社が日常的にお世話になっているのが、”Noto Fonts”です。

Noto FontsはGoogleがAdobeと協力して作成したフォントファミリーです。日本語はフォントウェイト(太さ)も6種類あって使いやすいですね！

凄いのはその言語数の多さ！英語・中国語などは勿論、ちょっと見慣れない言語まで作られています。多言語サイトでもデザインのイメージを守ってくれます。噂によると、フォントにない文字を使った際に表示されてしまう豆腐文字(□のような記号)を避けるために作られたとか。「No more tofu」略して「Noto」。

[Google Noto Fonts](https://www.google.com/get/noto/)

明朝体も使いたい

これまでNoto Fontsとして正式に提供されていたのは”Noto Sans JP”、つまりゴシック体でした。デザイン上明朝体を使用したい場合はデバイスフォントである游明朝を使ったり、有料サービスを使ったり…少しハードルが高かったように思います。

実は早期アクセスとして提供されていたのですが、あくまで試験的なものでした。(サーバーによっては読み込めなかったり…)

[Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access](https://googlefonts.github.io/japanese/)

しかしこの度正式にGoogle Fontsから提供されることに！！その名も”Noto Serif JP”です。ウェイトも安定の7種類、これでデザインの幅がぐっと広がりますね〜

[Google Fonts](https://fonts.google.com/specimen/Noto+Serif+JP)

また、ウェイトは1種類ですが同時に「さわらび明朝」も仲間入り。

[Google Fonts](https://fonts.google.com/specimen/Sawarabi+Mincho)

これで明朝体を使用したサイトでも意図せぬデザイン崩れがなくなる…と信じています。

最後に

Webフォントいいよ！を押してきましたが、ページ読み込み時に少し重くなるなどデメリットもあります。その為案件によって使い分ける必要はあるかと思います。

しかしWebフォントにすることでデザイン崩れ以外にも以下のようなメリットが。

・Retina(高解像度)でも綺麗に表示

・テキストなので変更が簡単

メリット/デメリットをご理解いただいた上で、是非Webフォントご検討くださいませ！

機会があれば他のサービスやWebフォント形式化についても次回以降触れたいと思います。