メニュー
カテゴリー
とき
家とネットを愛する、引きこもりパパ。用事がなければ、家を出ない。死ぬまで楽しく生きることを考えて生活してます!

WebフォントのGoogle Noto Sans Japaneseを90%以上軽量化する方法

ブログやサイトを作成していて、Webフォントを使用したいことってありますよね。

Webフォントを利用する上で1つ欠点なのが、ページの表示速度が遅くなってしまうことです。

そうすると離脱が上がってしまい、Googleの評価も下がってしまう。

この記事では

  • ブログやサイトにWebフォントを利用したい
  • Webフォントを利用するけど、少しでもページの速度を上げたい

人のために、Webフォントを軽量化する方法を紹介します。

なぜ容量を削減できるのかというと、必要のない漢字などを削除するからです。普段の文章を書くのに、常用漢字さえあれば問題ありせん。

以下で紹介する方法を利用すれば、Webフォントのファイルサイズを90%以上も削減でき、その結果、読み込み時間も速くなります!

もくじ

Webフォントを軽量化する手順

STEP
フォントファイルのダウンロード

使用したいWebフォントをダウンロードします。

今回は「Google Noto Sans Japanese」を利用します。

STEP
サブセットフォントメーカーをダウンロード&インストール

指定した文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成する。

フォントから指定された文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成するソフトです。 変換元のフォントとしては、TrueTypeフォント(拡張子 .ttf、.ttc)、OpenTypeフォント(拡張子.otf)を指定できます。 変換後のフォントをWOFFコンバータでWOFF(Web Open Font Format)に変換すればさらにファイルサイズを小さくできますので合わせてご利用ください。

STEP
WOFFコンバータをダウンロード&インストール

サブセットフォントメーカーで作成したフォントを、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フォントに変換することもできます。

STEP
第一水準漢字のファイルをダウンロード

文章を書く際に必要な最低限の漢字を集めた、第一水準漢字を指定します。

Webフォントのファイルをダウンロード

はじめに、無料Webフォント「Google Noto Sans Japanese」をダウンロードして用意します。

Google Noto Sans Japanese

以下のリンク先にある「Noto Sans CJK JP」というファイルをダウンロード。

ダウンロードしたファイルの中に、7種類のフォントファイルがあるので、軽量化したいフォントを決めます。

ダウンロード先

サブセットフォントメーカーをダウンロード&インストール

WOFFコンバータをダウンロード&インストール

武蔵システム

第一水準漢字のファイルをダウンロード

ダウンロード先

テキストファイルです。右クリックして、ファイルを保存してください。

サブセットフォントメーカーでWebフォントをサブセット化する

サブセットフォントメーカーの設定画面

サブセットフォントメーカーを起動。

作成元フォントファイル先ほどダウンロードした「.otf」ファイルを選択
作成後フォントファイル作成したフォントの保存先を選択
フォントに格納する文字第一水準漢字を開き、内容を全てコピーして貼り付け

設定が完了したら、作成開始をクリック。

WOFFコンバータを起動する

WOFFコンバータの設定画面
変換前ファイルサブセットフォントメーカーで作成した「.otf」ファイルを指定
変換後ファイル変換後のファイル名を指定
フォントをWOFFに変換する時IE8に対応させる場合「EOTファイルを作成する」にチェック

設定が完了したら、変換開始をクリック。

これで、woffファイルが作成されました。

軽量化前後のファイルサイズを比較

変更前変更後削減率
16.4MB569KB96%

ファイルサイズを比較すると、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.eot

style.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を指定するだけ。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
もくじ
閉じる