こんにちは。Web 担当の真谷（シンガイ）です。
先日「Web Font ってどうなの？」という非常にアバウトな問いをもらい、Web フォントについて説明する機会がありました。
今回はその時説明した3分でそれなりに分かる Web フォントについて記載します。
Web フォントとは？
CSS2 のユーザーの PC にインストールされているものを指定するものと違い、サーバー上にあるものを利用するフォントです。使いたいフォントファイルをサーバーに上げる・Web サービスから取得する事で、柔軟にフォントを変えることが出来ます。
Web フォント 導入方法
Web フォント提供サービスから直接フォント読み込みして使うのが一般的です。
例を挙げるとデコもじやFONT+（フォントプラス）では
- 会員登録
- Web フォントを使用するサイト（ドメイン）の登録
- Web フォント提供サービスから発行されるコード設置
- フォントの使用
のような流れになります。
Web フォント を使う利点
ユーザーローカルフォント閲覧環境に依存しない
ローカル環境にインストールされているフォントだと Mac と Windows では勿論フォントが違います。環境によってサイトの表現が変わらないというのは強みです。
画像より SEO ライク
文字を綺麗な画像で表現しようとすると SEO でどうしても不安が残りますが、Web フォントにするとそもそもテキストで解釈しているので、綺麗で且つ SEO ライクになります。
Web フォント を使う欠点
フォントファイルのロードに時間がかかる
どうしてもサーバーからロード→ css で適応をしているのでタイムラグが発生します。
font-size・font-family に気をつけなければならない
往々にして、Web フォントだと、フォントを小さくすると如実に潰れる・bold にすると潰れるなどの問題が発生します。ということもあり Web フォントにするとフォントが大きめになりがちです。
Web フォントサービス
前述でも出ましたが、Web フォントを提供している以下のようなサービスがあります。
デコもじ
初期の頃から Web フォントを提供しているサービスです。かわいいフォントが多く欧文だけでなく中国語・韓国語にも対応しているフォントもあります。
FONT+（フォントプラス）
大手のフォントメーカーが多く参加しているサービスです。使用する最低限の文字だけでフォントファイルを生成する革新的なシステムを備えていまず。
TypeSquare（タイプスクウェア）
フォントメーカーの雄、モリサワが展開している Web フォントサービスです。ちなみに前述の競合の FONT+ と提携しており、そちらでも使用することが出来ます。
Google Web Font
『Web Font』の文字で使っている Web フォントがこちらから使ってます。導入は前述で挙げた手順より更に簡単で、使いたいフォントが並んでいるので Quick-use を押すと導入手順が出てくるのでそれに従うだけ。商用・非商用問わず無償で利用可能です。
ただし日本語フォントが皆無なので、気軽に使える分用途は限られます。
以上のように Web フォントがどういうものかの大まかな説明でした。海外が中心でしたが国内でも Web フォントサービスは充実してきていて、Web 全部というわけではないですが採用の余地はあるかなぁと思います。
関連記事
