今回はサイトでのフォントの表現を広げるWebフォントについて紹介します。

Webフォントとは？

通常、ブラウザで表示できるフォントには限りがあります。
Webフォントは、通常cssの指定では使用できないフォントを利用できるようにする仕組みです。

Webフォントを使用する利点

cssのみでは再現できないフォントを使える

cssで何もフォント指定をしていない場合に表示されるフォントは、閲覧端末により決まっています。

cssのみでの指定では、上記に加え、予め閲覧環境へインストールされているフォントしか使用できませんが、Webフォントではそれら以外の様々なフォントを使用する事が出来ます。

デザインの自由度の向上

デザインで使用出来るフォントの自由度が広がり、テキストによりデザイン性を持たせることが出来ます。

デバイス共通で同じフォントが使える

Webフォントに対応しているブラウザなら、閲覧環境に関係なく、共通のフォントを表示させる事が出来ます。

使い方

使用する手順はカンタンです。

1. 使いたいフォントを任意の制作ディレクトリに入れる
2. CSSにてfont-faceでフォントファイルを指定
3. font-familyでフォントを指定する

@font-face {
font-family: "hogehoge";
src: url("フォント名が入ります.eot");
src: url("フォント名が入ります.eot?iefix") format("eot"),
url("フォント名が入ります.woff") format("woff"),
url("フォント名が入ります.ttf") format("truetype"),
url("フォント名が入ります.svg#webfontjSpbZQRv") format("svg");
}
html{
font-family: "hogehoge";
}

指定する時に各ブラウザで問題無く表示させる為、.eot、.woff、.ttfの三つを指定する事を推奨します。

上記が基本的な使い方の手順となりますが、最近ではGoogle Web Fontsと言うサービスからもっと手軽に使用する事が出来ます。

Google Web Fonts

https://fonts.google.com/

Google Web Fontsのフォントは個人/法人問わず無料で使用する事が出来ます。
以前までは日本語は対応していませんでしたが、最近になり日本語フォントも試験的に使用できるようになりました。

Google Fonts + 日本語

https://googlefonts.github.io/japanese/

使い方も、fontのURLをCSSへインポートし、font-familyを設定するだけです。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
html{
font-family: "Noto Sans Japanese","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",Verdana,Arial,sans-serif;
}

使用するにあたっての注意点

利用するフォントによっては商用利用が出来ない物があります。利用する前に利用条件を確認しておきましょう。

ブラウザによってはWebフォントが反映されない場合があります。クロスブラウザ対応をする場合は代替となるフォントの設定等を考慮しておきましょう。

まとめ

Webフォントを使用する事で、デザインの自由度が広がると同時にブラウザ標準ではできなかったフォント指定が可能です。

デバイス標準でないフォントも、Webフォントの機能によって導入がしやすくなりました。
私も最近使用する機会が増えていますが、ページのフォントがデバイス標準以外のフォントになると新鮮味を感じますし、閲覧者の興味を惹ける可能性もあります。

今まで使った事が無いと言う方は、これを機に使ってみてはどうでしょうか。