Webフォントの設定【サーバにフォントをインストール】

Webサーバで独自フォントを使うためは次のとおり設定します。（１）WOFFへ変換（２）サーバへアップロード（３）@font-faceでフォントURLを指定（４）font-familyを指定。Google Noto Fontなどの外部フォントを利用するためには（３）から設定します。

Webサーバで独自フォントを利用する方法

手順１：WOFFファイルを作る

まずは、フォントをWebサイト用にします。（「WOFFとは何？」という方はこちら。）

通常、日本語フォントのファイルサイズは、数MB～数十MB程度あります。読み込みに時間がかかってしまいますので以下の２つのことをして、ファイルサイズを圧縮します。

1. 必要な文字を選定（サブセット化）
2. WOFF形式に圧縮

サブセットとは「部分集合」という意味です。たくさんある文字の中から必要な文字を取り出すといった用途で使うことがあります。

それぞれ、武蔵システム様の「サブセットフォントメーカー」、「WOFFコンバータ」を利用するのがお勧めです。

手順２：WOFFファイルをアップロードする

WebフォントはCSSでURLで指定して読み込みます。そこで、Webからアクセスできる位置に配置します。WordPressの場合は、子テーマの中に作るのがセオリーですが、他のサイトで使い回す場合は、独自フォルダーにアップロードしてもいいかもしれません。

手順３：@font-faceで、Webフォントを読み込む

以下のサンプルコードを参考に、Webフォントを読み込んでください。

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

手順４：font-familyで、Webフォントを指定する

後は、必要なところに適切に配置すれば完了です。

div {
    font-family: myFirstFont;
}

SEO的にWebフォントは効果的か？

サーバに独自のWebフォントを使うことのリスクは「読み込み時間」です。吸引力のあるサイトであれば、３～４秒待っても内容を閲覧したいと思うはずです。一方「別のサイトでいいや。」と思われるサイトでは、読み込み時間の遅さはマイナスです。

見た目は重要な要素の１つですが、SEOは総合力ですので、全体最適になるように判断することをお勧めします。

へぇ～、なるほど～。このサイトは「別のサイトでいいや。」って思われるから、Webフォントを使っていないんだね～。

・・・精進します。

• CSS3 @font-face Rule