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

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

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

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

 

上のパスは、「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ちゃんねる管理人、ひろゆきが好き。

POSTED COMMENT

  1. yosuke hara より:

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

COMMENT

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