WordPress

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

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

以前は、Google Fonts Early Access!を利用して表示していましたが、日本語ウェブフォントは、文字数が多いので読み込みに時間が長くなってしまいます。

だったら、ファイルサイズを軽くして使えばいい!削減率は、90パーセント以上です!

必要なフォントをダウンロードする

noto-sans-japanese_01

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

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

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

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

フォントから指定された文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成するソフトです。 変換元のフォントとしては、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フォントに変換することもできます。

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

右クリックでファイルを保存してください。

フォントのサブセット化

google-noto-sans-japanese_02

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

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

WOFFコンバータを起動する

google-noto-sans-japanese_03

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

[memo title=”メモ”]上のパスは、fontsフォルダの中に入れた例です。[/memo]

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

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

[codebox title=”style.css”]

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

[/codebox]

 

フォントを使用したい箇所に、font-familyを指定します。

[codebox title=”style.css”]

body {
font-family: 'Noto Sans Japanese', sans-serif;

[/codebox]

ABOUT ME
ねこのてそう
ねこのてそう
妻、娘、ネコと暮らす、超記憶力の悪い30代のオッサン。 好きな言葉は、死ぬこと以外、かすりキズ。 尊敬する人は絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 元2ちゃんねる管理人ひろゆきが好き。(趣味と思考が似てる) ニコニコ生放送の、暗黒リスナー歴9年。

POSTED COMMENT

  1. yosuke hara より:

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