ブログやサイトを作成していて、Webフォントを使用したいことってありますよね。
Webフォントを利用する上で１つ欠点なのが、ページの表示速度が遅くなってしまうことです。
そうすると離脱が上がってしまい、Googleの評価も下がってしまう。
この記事では
- ブログやサイトにWebフォントを利用したい
- Webフォントを利用するけど、少しでもページの速度を上げたい
人のために、Webフォントを軽量化する方法を紹介します。
なぜ容量を削減できるのかというと、必要のない漢字などを削除するからです。普段の文章を書くのに、常用漢字さえあれば問題ありせん。
以下で紹介する方法を利用すれば、Webフォントのファイルサイズを90%以上も削減でき、その結果、読み込み時間も速くなります！
Webフォントを軽量化する手順
使用したいWebフォントをダウンロードします。
今回は「Google Noto Sans Japanese」を利用します。
指定した文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成する。
フォントから指定された文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成するソフトです。 変換元のフォントとしては、TrueTypeフォント（拡張子 .ttf、.ttc）、OpenTypeフォント（拡張子.otf）を指定できます。 変換後のフォントをWOFFコンバータでWOFF（Web Open Font Format）に変換すればさらにファイルサイズを小さくできますので合わせてご利用ください。
サブセットフォントメーカーで作成したフォントを、WOFF形式に変換。さらに軽量化します。
フォントとWOFFの相互変換を行うソフトです。 WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。 変換元のフォントとしては、TrueTypeフォント（拡張子 .ttf）、OpenTypeフォント（拡張子.otf）、Windowsにおけるフォントにリンクする形式の外字ファイル（拡張子.tte、.ote）を指定できます。 WOFFの作成と同時にEOT（Embedded OpenType）ファイルを作成することもできます。ただし、Windos版で作成したEOTファイルは圧縮されていますが、Mac版では圧縮されていません。 WOFFをTrueTypeフォント／OpenTypeフォントに変換することもできます。
文章を書く際に必要な最低限の漢字を集めた、第一水準漢字を指定します。
Webフォントのファイルをダウンロード
はじめに、無料Webフォント「Google Noto Sans Japanese」をダウンロードして用意します。
以下のリンク先にある「Noto Sans CJK JP」というファイルをダウンロード。
ダウンロードしたファイルの中に、7種類のフォントファイルがあるので、軽量化したいフォントを決めます。
サブセットフォントメーカーをダウンロード&インストール
WOFFコンバータをダウンロード&インストール
第一水準漢字のファイルをダウンロード
テキストファイルです。右クリックして、ファイルを保存してください。
サブセットフォントメーカーでWebフォントをサブセット化する
サブセットフォントメーカーを起動。
| 作成元フォントファイル | 先ほどダウンロードした「.otf」ファイルを選択 |
| 作成後フォントファイル | 作成したフォントの保存先を選択 |
| フォントに格納する文字 | 第一水準漢字を開き、内容を全てコピーして貼り付け |
設定が完了したら、作成開始をクリック。
WOFFコンバータを起動する
| 変換前ファイル | サブセットフォントメーカーで作成した「.otf」ファイルを指定 |
| 変換後ファイル | 変換後のファイル名を指定 |
| フォントをWOFFに変換する時 | IE8に対応させる場合「EOTファイルを作成する」にチェック |
設定が完了したら、変換開始をクリック。
これで、woffファイルが作成されました。
軽量化前後のファイルサイズを比較
| 変更前 | 変更後 | 削減率 |
|---|---|---|
| 16.4MB | 569KB | 96% |
ファイルサイズを比較すると、16.4MBあったファイルが、569KBまで容量が減りました！
削減率は、なんと96パーセント！
サーバーに軽量化したファイルをアップロード
作成した「.woffファイル」と「.eotファイル」を使用しているテーマの、style.cssと同じ階層にアップロードします。
以下のパスは「fonts」フォルダを作成した例です。
/public_html/wp-content/themes/使用テーマ名/fonts/Noto Sans Japanese.woff/public_html/wp-content/themes/使用テーマ名/fonts/Noto Sans Japanese.eotstyle.cssにコードを追加する
fontsフォルダの中にある「.woffファイル」と「.eotファイル」を読み込む場合。
@font-face {
font-family: 'Noto Sans Japanese';
src: url('./fonts/Noto Sans Japanese.woff'),url('./fonts/Noto Sans Japanese.eot');
}font-familyを指定する
body {
font-family: 'Noto Sans Japanese', sans-serif;
}あとは、フォントを使用したい箇所に、font-familyを指定するだけ。