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

Webサーバで独自フォントを使うためは次のとおり設定します。(1)WOFFへ変換(2)サーバへアップロード(3)@font-faceでフォントURLを指定(4)font-familyを指定。Google Noto Fontなどの外部フォントを利用するためには(3)から設定します。
Welcome
  • Webサーバにサブセット化したwoffファイルを置く。
  • @font-faceでWoffのURLを読み込む。
  • font-familyで独自フォントを指定する。

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

手順1:WOFFファイルを作る

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

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

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

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

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

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

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

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

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

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

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

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

div {
    font-family: myFirstFont;
}

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

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

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

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