WordPress

無料の日本語ウェブフォントGoogle Noto Sans Japaneseを90%以上軽量化する方法

このブログの記事のフォントを、無料の日本語ウェブフォント「Google Noto Sans Japanese」に変更してみました。

しかも、フォントのファイルサイズを、90%以上も削減しているので、読み込み時間が速い!

必要なファイルをダウンロード&インストールする

フォントを軽量化するための準備

  • フォントファイルのダウンロード
  • サブセットフォントメーカーをインストール
  • WOFFコンバータをインストール
  • 第一水準漢字のファイルをダウンロード

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

noto-sans-japanese_01

はじめに、以下のリンク先にある「Noto Sans CJK JP」をダウンロードします。

ダウンロードしたファイルの中に、7種類のフォントファイルがあるので、使用したいフォントを決めましょう。

Google Noto Fonts

Noto Sans CJK JP

サブセットフォントメーカーをインストール

サブセットフォントメーカーとは?

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

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フォントに変換することもできます。

武蔵システム

WOFFコンバータ

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

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

フォントのサブセット化

google-noto-sans-japanese_02

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

作成元フォントファイル:先ほどダウンロードしたフォントファイル(.otf)を選択。

作成後フォントファイル:作成したフォントの保存先を選択。

フォントに格納する文字:テキストファイルの第一水準漢字を開き、内容を全てコピーして、貼り付けます。

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

WOFFコンバータを起動する

google-noto-sans-japanese_03

変換前ファイル:サブセットフォントメーカーで作成した、.otfファイルを指定。

変換後ファイル:変換後のファイル名を指定。

フォントをWOFFに変換する時:IE8に対応させたい場合、「EOTファイルを作成する」にチェックを入れます。

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

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

NotoSansCJKjp-Regular.otfの場合
変更前 変更後 削減率
16.4MB 569KB 96%

ファイルサイズを比較すると、16.4MBあったファイルが569KBまでサイズダウン!削減率は、なんと96パーセント!

サーバーにアップロードする

作成した「.woffファイル」と「.eotファイル」を、使用しているテーマのstyle.cssと同じ階層にアップロードします。

パス

/public_html/wp-content/themes/使用テーマ名/fonts/Noto Sans Japanese.woff

パス

/public_html/wp-content/themes/使用テーマ名/fonts/Noto Sans Japanese.eot

上のパスは、「fonts」フォルダを作成した例です。

style.cssにコードを追加する

fontsフォルダの中にある、.woffファイルと、.eotファイルを読み込む場合の例。

css

@font-face {
font-family: ‘Noto Sans Japanese’;
src: url(‘./fonts/Noto Sans Japanese.woff’),url(‘./fonts/Noto Sans Japanese.eot’);
}

 

あとは、フォントを使用したい箇所に、font-familyを指定するだけ。

css

body {
font-family: ‘Noto Sans Japanese’, sans-serif;
}

ABOUT ME
ねこのてそう
ねこのてそう
超記憶力の悪い、30代の引きこもり父さん。 死ぬまで楽しく生きるがモットー。 元2ちゃんねる管理人、現4chan管理人、ひろゆきが好き。 尊敬する人は、絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 日本嫌煙党 千葉(引きこもり代表)
関連記事

POSTED COMMENT

  1. yosuke hara より:

    良い記事ありがとうございます! 参考にさせていただきました^^/

COMMENT

メールアドレスが公開されることはありません。