自社サーバーにフォントをアップロードして、Webフォントを使用する方法

Google Fontsの使用方法について2回にわたって紹介して参りましたが、今回は自社のサーバーにフォントをアップロードして、Webフォントとして使用する方法を紹介します。

Google Fontsを使用する場合と比べると設定には時間がかかりますが、より多くの種類のフォントを柔軟にWebフォントとして使用できます。
例えばWebフォントとして配布されていないフォントをWebフォントとして使用できたり、必要な文字だけを選定してフォントのファイルサイズを軽くして読み込み速度を早くしたりできます。各フォントをWebフォントとして使用できるかどうかはそれぞれの利用規約によるのでWebフォントとして使用したフォントの利用規約をご確認ください。

Webフォントのファイル形式

Webフォントに使用するフォントには主に以下のものがあります。

• woff
• woff2
• ttf
• eot

woff形式はWebフォント用に開発されたフォントで、IE9以降やEdge、Chrome、Firefox、Safariなど非常に多くのブラウザがサポートしています。
woff2形式はwoffに比較すると圧縮率が高く、IEを除く最新のブラウザならば表示することが可能です。

ttf形式は一般的なTrue Typeのフォントのファイル形式でWebフォントようにファイル形式の変換などは必要ないですが、今となってはAndoroid4.3以前の標準ブラウザなどでのみ表示に使用します。

eot形式はIEでの表示用に使用するファイル形式です。IE8以前はwoffに対応していないので、eotで指定をして表示させます。しかし、IE8自体がもうすでに開発を終了しているブラウザですので、記述自体必要がないかもしれません。

フォントのコンバート方法

フォントのコンバートには武蔵システムが配布している「WOFFコンバータ」が便利です。Windows版とMac版があるので、環境を選ばず使用でき、「サブセットフォントメーカー」と組み合わせることで使用する文字を選んでフォントファイルをつくるサブセットを作ることも可能です。
このコンバータはttfファイルを元にこれ一つでwoff、woff2、eotのファイルを作成することが可能なので非常に便利です。

CSSの記述方法

Webフォントを指定する場合は@font-faceでフォントを定義してfont-familyでそのフォントを呼び出します。

//フォントの定義
@font-face {
  font-family: 'フォント名';
  src: url('フォントのパス') format('フォントのファイル形式');
}

//フォントの呼び出し
.aaa {
  font-family: 'フォント名'; 
}

また通常Webフォントの指定はクロスブラウザに対応するために複数のファイル形式のフォントを指定します。その場合はカンマ区切りで指定し、前に書いた記述ほど優先して表示されます。

//フォントの定義
@font-face {
  font-family: 'test-font';
  src: url('/font/test.woff2') format('woff2'),
  url('/font/test.woff') format('woff'),
  url('/font/test.ttf') format('truetype');
}

上記のように記述をするとwoff2、woff、ttfの順で表示できるファイル形式のフォントを表示することが可能です。
また現在ほぼ必要ありませんが、下記のように記述をすると古いIEなどでもWebフォントを表示することが可能です。

//フォントの定義
@font-face {
  font-family: 'test-font';
  src: url('/font/test.eot');
  src: url('/font/test.eot?#iefix') format('embedded-opentype'),
  url('/font/test.woff2') format('woff2'),
  url('/font/test.woff') format('woff'),
  url('/font/test.ttf') format('truetype');
}

同じフォントのウェイト違いのフォントを定義する

また同じフォントのウェイト違いは同じフォント名で指定することが可能です。
下記のように記述をし、呼び出しをすれば設定することが可能です。

//フォントの定義
@font-face {
  font-family: 'test-font';
  src: url('/font/test.woff2') format('woff2'),
  url('/font/test.woff') format('woff'),
  url('/font/test.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'test-font';
  src: url('/font/test-light.woff2') format('woff2'),
  url('/font/test-light.woff') format('woff'),
  url('/font/test-light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'test-font';
  src: url('/font/test-bold.woff2') format('woff2'),
  url('/font/test-bold.woff') format('woff'),
  url('/font/test-bold.ttf') format('truetype');
  font-weight: 700;
}

//フォントの呼び出し
.aaa {
  font-family: 'test-font';
  font-weight: 500;
}

.bbb {
  font-family: 'test-font';
  font-weight: 300;
}

.ccc {
  font-family: 'test-font';
  font-weight: 700;
}

自社のサーバーにフォントをアップロードしてWebフォントを使用する場合、Google Fontsを利用してWebフォントを使用する場合に比べると手間は増えてしまいます。しかしより柔軟に対応が可能なためどちらの方法でWebフォントを利用すべきかその都度判断する必要があります。ぜひ活用して、フォントにもこだわったWebサイトを運営してください。