Webフォントの使い方

それでは、具体的なWebフォントの使い方を確認していきましょう。
　　

1. 使いたいフォントを見つける

まずは、使いたいフォントを決めていきます。

Webフォントを使う場合には、フォントスタンドと呼ばれるWebフォントを配布しているサイトに登録して利用する場合と、自分でフォントファイルをサーバーにアップロードして使う方法があります。
　　

2. フォントファイルを指定

CSSの*「@font-face」*を利用してフォントファイルをブラウザに読み込ませます。

@font-face {
　　font-family: 'フォント名';
　　src: url('フォント名.eot'), url('フォント名.woff') format('woff'), url('フォント名.ttf') format('truetype');
}

　　

3. フォントの適用

Webフォントをページ全体に適用させるには、bodyに*「font-family」*を指定します。
部分的にWebフォントを指定したい場合は、bodyの部分を任意で変更してください。

body {
　　font-family: 'フォント名';
}

　　

自分でWebフォントデータを用意する場合

フォントスタンドで公開されているフォントの数は限られているため、もしかしたら自分が扱いたいフォントがないかもしれません。
そんな時は、自分で既存のフォントデータをWebフォント用に変換して、サーバーにアップロードするという方法もあります。

ただし、自分でWebフォントデータを用意する場合はライセンス確認を必ず行いましょう。
著作権がフリーのフォントでも再配布禁止であることがあるので注意が必要です。
　　

1. 使いたいフォントを見つける

まずは、利用したい日本語フォントを見つけてダウンロードしておきましょう。
　　

2. フォントのサブセット化

欧文フォントは文字数も限られているので、1つのフォントファイルが250KB程度です。
しかしながら、日本語フォントは20MB前後あるため、そのままアップロードすると読み込み速度が非常に遅くなってしまうのです。

そこで日本語フォントでは、「第一水準漢字」を中心として日常でよく使う漢字だけを抜き出す*「サブセット化」*と呼ばれる作業を行います。
サブセット化することで、ファイルサイズをできるだけ小さくして、読み込み速度を上げることが可能です。サブセット化をするためのソフトはインターネット上で配布されています。
　　

3. Webフォント化

次に、軽量化したフォントファイルを*「.woff」*という拡張子に変換していきます。

この拡張子は、ブラウザでの表示に対応しています。変換用のソフトは同様にインターネット上で配布されています。
　　

4. サーバーにWebフォントをアップロード

Webフォントファイルの変換が完了したら、サーバーにWebフォントをアップロードします。
URLに関しては、外部サーバーに設置する場合は絶対パスで記述する点に注意しましょう。

@font-face {
　　font-family: 'フォント名';
　　src: url('フォント名.eot'), url('フォント名.woff') format('woff'), url('フォント名.ttf') format('truetype');
}