Webフォント(日本語・英語)の使い方とおすすめのサイトまとめ

Webフォントとは、インターネット上（www上）が持つフォントデータを使って、ホームページ上に表示させるシステムやフォントのことをいいます。

Webフォントは昔から使われていたわけではなく、CSS3から利用できるようになりました。

制作側にとっても扱いやすく便利ですし、ユーザービリティの向上にもつながる便利なシステムです。

Webフォントはユーザーの環境に左右されない

従来のフォント指定は、パソコンのOSに標準されているフォントを使うのが一般的でした。

Windowsだったら「MS ゴシック」や「MS 明朝」、Macだったら「ヒラギノ角ゴシック」や「ヒラギノ明朝」などです。

それに加えて、制作側が色々なフォントをダウンロードして使っていたのですが、この方法だとユーザーのブラウザ環境によっては表示されない場合があったんです。

でもWebフォントはフォントデータがインターネット上に置かれているので、ユーザーの環境に左右されることはありません。

今はほとんどの主要ブラウザがWebフォントをサポート済みなので、どのブラウザでも同じようにフォントを表示させることができます。

また、テキストデータとして扱えるのでSEO（検索エンジンの最適化）の面でもメリットがあります。

先ほど説明した従来のやり方のときは、文字を画像で表示することも多かったですが、基本的に検索エンジンはテキストデータを主に読み込むのでSEO的には不利なんです。

画像タグにはaltタグといって、画像が何を表しているのかの説明を記述できますが、人間が見ているのと同じように、検索エンジンが画像を認識できるわけではないからです。

要するに、SEO的には画像を大量に使うよりも、なるべくテキストを使った方が効果があるということ。

この辺のこともWebフォントならカバーできますし、画像じゃなくテキストというのは、編集や修正をしやすいので便利です。

ただし、欧文のフォントに比べ、日本語フォントは少ないです。

Webフォントを利用するのは、そんなに難しくありません。

まず使用したいフォント（欧文フォント・和文フォント・アイコンフォント）を用意し、サーバー上におきます。

ただしブラウザによって対応しているフォントのファイル形式が異なるため、いくつかの形式に変換したファイルを用意しなければなりません。

フォントが用意できたら、CSS3で新しく導入された@font-faceという技術で、Webフォントを指定します。

あとは表示させたい箇所にCSSでWebフォントを適用させるだけでOK。

@font-face {
font-family: フォント名;
src: url(フォントのURL) format(“フォントの形式”);
}

@font-faceの基本的な記述はこのような感じになります。

書き方に関しては、『Webフォントを指定する@font-faceの書き方【CSS】』で、フォントファイルの形式の種類についても説明しています。

<h1>Webフォント</h1>

そしてWebフォントを適用させたい箇所、たとえば上記のように見出し（h1）にWebフォントを適用させたい場合、

h1 {
font-family: @font-faceで指定したフォント名;
}

このように、h1にCSSのfont-familyプロパティで、@font-faceで指定したフォント名を記述するだけです。

この方法でも難しくはないと思うんですが、もっと簡単にWebフォントを利用することができます。

それがWebフォントのサービスを使うという方法です。

Webフォントのサービスを使うと、@font-faceで記述する代わりに、スクリプトを読み込むだけで簡単に使うことができるのでとても便利です。

「Google Web Fonts」をはじめ、多くのWebフォントサービスがあるので、いくつか紹介しておこうと思います。

気になるのがあれば調べてみてください。

調べればもっといっぱいありますが、知名度が高いのを挙げるとこのような感じ。

最近ではGoogle Web Fontsでも日本語を扱うなど、欧文だけでなく日本語に対応したサービスも増えてきました。

Fonts.comでも両方扱っていますし、TypeSquareは有名な日本のフォントメーカー「モリサワ」によるWebフォントサービスです。

Webフォントの利用はユーザービリティの向上につながり、テキストを扱うことでSEO効果や修正などの管理においても利便性が高くなるので、ぜひ使ってみてください。