H2O space GoogleのWebフォント提供サービス『Google Fonts』で、日本語フォントの提供が開始。早期アクセス（正式公開前の、実験的な公開）として、利用が可能になりました。
Webフォントって何？
それでは、ここで出てくる、「Webフォント」とは何でしょう？
フォントというのは「字体」のことで、大きく分けると、ゴシック体や明朝体などがあります。
本や街の看板などを見ると分かるとおり、実に様々なフォントが使われています。しかし、Webサイトでは通常、限られたフォントしか利用できませんでした。
利用者の環境に依存するフォント環境
Webサイトの場合、印刷するのとは違い、インターネットを通じて送信されるのは、文字の「内容」だけが送信されます。これを、どんなフォントで表示するかは、利用者の環境に依存してしまいます。
例えば、同じ文章を表示した場合でも、Windows 10の Edgeと、iPhoneの場合では違うフォントで表示されます。
画像文字とそのデメリット
このように、見る人の環境でフォントが変わってしまうと、表現に制限が出てしまい、Webデザインが思うようにできません。
そこで、これまでは画像編集ツールで文字を作り、それを「画像」として掲載する「画像文字」という手法がとられてきました。
例えば、次の文字は文字のように見えますが、実際には画像で作られています。
この方法は、デザイン性は良くなりますが次のようなデメリットがあります。
・読み込みが遅くなる
画像の場合、文字よりもファイルの大きさが大きくなります。そのため、ページが表示されるまでに時間がかかるようになってしまいます。
・変更がしにくい
画像文字で作ってしまったものは、後から内容を変更する場合に、また画像編集ツールの操作から必要になってしまいます。
フォント情報も送信するWebフォント
そこで、近年注目されているのが「Webフォント」という技術。これは、フォントの情報をインターネットを通じて送信し、閲覧環境を問わずに、好きなフォントで表示できるというわけです。
Google Fontsが注目される理由
Webフォント字体はこれまでもサービスが存在していました。しかし、Webフォントはそのフォントのライセンス的な問題やフォントを配信するサーバーのコストなどがあるため、サービス自体が有料であることがほとんど。手軽に使うには少し抵抗がありました。
Google Fontsは、使えるフォントの種類こそ少ないものの、無料で使うことができるのが魅力と言えます。
Google Fontsを使ってみよう
Google Fontsを使うには、HTMLファイルを編集する必要があります。自分でできない場合には、制作会社などに依頼すると良いでしょう。
まずは、Google Fontsのサイトにアクセスして、使いたいフォントを選びます。
右側に、利用手順が記載されているので、次のような記述をコピーし、 HTMLファイルのheadタグに追記します。
そして、フォントを変えたい文章の前後に次のようなタグを追加します。
これで、フォントが変わって表示されます。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”JRwwqR” default_tab=”html,result” user=”h2ospace”]See the Pen <a href=’http://codepen.io/h2ospace/pen/JRwwqR/’>Google Fonts – Japanese Font</a> by TANIGUCHI Makoto (<a href=’http://codepen.io/h2ospace’>@h2ospace</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Webの表現力が上がるWebフォント。これからも、活用事例が増えていくでしょう。