そろそろ行けるか？Webフォント

Webサイトを制作する上で、「どのブラウザー、どのOSでも問題なく表示される。」ということがHTMLコーダーに求められます。そこで大きな壁となるのが「フォント」です。
（本当は古いIEが一番の壁なのですが、古いIEのサポート打ち切りなどにより淘汰されつつあります。）

最近では「游ゴシック体」「游明朝体」が出てきたおかげで、そこそこ新しいOSを使っている人であればWindowsでもMacでも同じフォントでサイトを見ることができるようになってきました。
以前、このWindows、Mac共通フォントが出るちょっと前に「Webフォント」が流行りだして挑戦したことがあり、その時は日本語（主に漢字）の特異性により断念し、ひらがなとカタカナ英数字、アイコンフォントと呼ばれるアイコンのみの実装となりました。

しばらく共通フォントを使い制作を行ってきたのですが、最近では日本語のWebフォントも充実しているのではないかと調べてみたところ、使い勝手の良さそうなのがいくつかあったので、この場を借りて再挑戦してみたいと思います。

Webフォントとは

通常Webサイトを閲覧する際のフォントは、「CSSで指定されたWindowsやMacの中にあるであろうフォント」を指定して、ブラウザーが各Windows・Mac内から引っ張ってきます。
Webフォントではサーバー上（Web上）においてあるフォントデータを用いてブラウザーが表示します。各Windows・Mac内にあるかどうか分からない「無難」なフォントを使うより、制作側が意図したフォントを使うことができます。

Webフォントのメリット・デメリット

使う上でおさえておかなければならないメリットとデメリットはどうでしょうか。
しっかり把握した上で使っていきましょう。

Webフォントのメリット

• WindowsやMac、スマートフォン（iOS、Android）などOSを意識する必要がない
• 文字幅や大きさの違いによって意図せず改行したり、はみ出したりすることがない
• 制作側（主にデザイナー）の意図したフォントで表示される

Webフォントのデメリット

• ブラウザーがフォントデータをダウンロードするのでサイト表示に時間がかかる（特にスマートフォン）
• 古いブラウザーが対応していない（CSS3対応必須）
• 日本語環境においてWebフォント側で用意されていない漢字を使った場合に別のフォントに代替される

利用条件・ライセンスに注意

フォントの利用の際にはフォント制作者からの注意点など、使って大丈夫かどうかは必ず確認しましょう。
写真や画像や文章などと同じです。制作者に心から「こんな便利なフォントを作ってくれてありがとう！」と感謝の気持ちを忘れずに使わせて頂きましょう。

Webフォントを使ってみよう

早速使ってみましょう、今回使用するのは『kazesawa（かぜさわ）フォント』です。

公式サイトはこちら。kazesawa（かぜさわ）フォント

こちらのフォントは導入方法までわかりやすく説明してくれるので、Webフォント初心者の私でも導入できそうです。

Kazesawa フォントをダウンロードし、サーバーへ設置

公式サイトからダウンロードサイトへ行き、zip形式のファイルをダウンロードします。
ライセンス内容を確認したうえで制作者に感謝しつつ、フォントデータをサーバーへアップロードします。
今回はcommon/以下にfontsというディレクトリを作成し、そこへ設置しました。
CSSはcommon/styles/以下に配置してあります。

CSSの変更

以前使用したデモページを流用します。
CSSの最上部に以下を設置し、Webフォントで表示したい場所をkazesawaフォントに設定します。今回はclass指定で設定しています。

私はここでつまずいた！

検証当初、上記内容ではIE、GoogleChrome、SafariではWebフォントで綺麗に表示されますが、Firefoxではなぜか表示されませんでした。
その後の検証で、『Firefoxのバージョンの中にWebフォントが正常に表示できないものがあるらしい。』ということがわかりました。
検証を始めた時（2016年3月10日）のFirefoxのバージョンは「44.0.2」今現在（2016年3月15日）記入している時のバージョンは「45.0」、バージョン45.0では正常に表示されました。
この数日、Webフォントが表示されなくて試行錯誤を重ねていたのですが原因はFirefoxのバージョンだったというオチです。

まとめ

アルファベットのみで形成される海外サイトとは違って、日本語には漢字が存在するためWebフォントの浸透は世界に比べて出遅れた感はあります。
出遅れている間に共通フォントが出現して必要性は薄れてきましたが、1フォントで全てを表現するのもデザイナーとしては物足りないのではないでしょうか？
そういった意味でも共通フォントとは別のフォントでOS、ブラウザーを問わず同じ表示を実現できるのは大きいと思います。

今回Webフォントの導入に再挑戦し、Firefoxのバージョンによるバグか何かで表示できないという形でつまずいたのですが、良いタイミングでバージョンの更新となり正常に表示されました。
Webフォントのメリット・デメリットを把握して、共通フォントとの使い分けでより良いWebサイト制作が出来ればと思います。