Webサイト上で重要な要素の一つにフォントが挙げられます。
最近では、多くのホームページでWebフォントを採用することが増えており、これまでできなかった表現が可能となっています。

今回は、Webフォントの概要と、Webフォントの使用手順を解説します。
併せて、オススメのWebフォントサイトも紹介していますので、ぜひ参考にしてみてください。

Webフォントとは

これまでのフォント指定は、CSSで「font-family」というコードでフォントを指定して文字を表示させていました。
ただし、ユーザー側の閲覧環境にフォントがインストールされていなければ、表示できないというデメリットがあったため、使用できないフォントも多数ありました。

それらの問題を解決するのがWebフォントで、あらかじめサーバに格納してあるフォントの情報を提供することで、閲覧しているユーザー側のOS環境に左右されず、正しく表示することができます。
ちなみに、このWebフォントの機能は、CSS3から追加されました。

既に多くのWebサイトで使用されていますが、最近ではGoogleが日本語Webフォントをクラウドで提供開始したことで、さらにその使用率は上がっています。

Webフォントのフォーマット

Webフォントのフォーマットには、様々な種類があります。
ここではその一例をご紹介します。

WOFF(Web Open Font Format)

2009年にMozilla Foundationで開発されたフォントファイルの形式の一つです。
TrueTypeやOpenTypeフォントと同様のフォントデータですが、さらに使いやすいように圧縮したり、著作権情報などのメタデータを加えたりした形式です。
各種主要ブラウザが対応しています。

EOT(Embedded OpenType)

Internet Explorer 4でサポートされたフォントフォント形式です。
圧縮されていることが多いので、ファイルサイズは小さいですが、Internet Explorerでのみ対応しています。
Microsoftでは、Web Embedding Fonts Tool (WEFT) というユーティリティが提供されています。

SVG(Scalable Vector Graphics)

JPEGやPNGのようなビットマップデータではなく、イラストレーターで使用するベクターデータを扱う画像フォーマットのことを指します。
これを応用したフォントフォーマットです。

テキストファイルなので、テキストエディタで内容を確認することができます。
GoogleChromeなどの一部Webブラウザでのみ対応しています。

SVGZ(gzip圧縮されたSVG)

SVGを圧縮したものです。
SVGZフォントのファイル拡張子を.svgzから.gzに変更し、解凍ツールで展開することで、SVGフォントと同じ内容になります。

TrueType

パソコンにインストールして使うフォントそのもののことです。
Apple社とMicrosoft社が共同で開発したフォントで、WindowsとMacのパソコンには標準的にインストールされています。
フォント形式によっては曲線の描画方法に違いがあり、TrueTypeフォントでは二次Bスプライン曲線で描画されています。
多くのフリーフォントはTrueType形式で作られていますが、含まれている文字セット数はOpenTypeフォントに比べて少なめです。

OpenType

TrueTypeと同様、PCにインストールして使うフォントそのもののことです。
Adobe社が開発したフォント形式で、DTP(Desktop publishing)を行う際に標準的に使用されています。
OpenTypeのフォント形式は、イラストレーターでできる曲線同様、三次ベジェ曲線で描画されています。
文字セット数が非常に多いことが特徴です。