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

eyecatch_noto-sans-japanese

無料の日本語ウェブフォント「Google Noto Sans Japanese」に変更しました。

少しだけサイトの雰囲気が変わったかな?前回は、Google Fonts Early Access!を利用して表示。 しかし、日本語ウェブフォントは、英語などに比べると、文字の数が多いので重くなってしまいます。

そこで、今回はファイルサイズを軽くする方法を紹介します。

削減率は、なんと90パーセント以上です!

 

スポンサーリンク

必要なファイルを用意

Google Noto Sans Japaneseをダウンロード Google Note Fonts 移動した先にあるNoto Sans CJK JPをダウンロード。 noto-sans-japanese_01ダウンロードしたファイルの中に、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ファイルが完成。

[table id=1 /]

16.4MBあったファイルが569KBまでサイズダウン!96パーセントの削減に成功!

 

フォントをサーバーにアップロードする

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

「stinger5child」という名前の子テーマを設定しているこのサイトの場合はこんな感じ。

/public_html/wp-content/themes/stinger5child/fonts/Noto Sans Japanese.woff 「fonts」フォルダを作成して、その中に置きました。

 

style.cssにコードを追加

 

さいごに

今回参考にさせて頂いたサイト CreativeTipsさん、ありがとうございます!!  

スポンサーリンク
iMacと猫が好きな完全インドア派。

2 件のコメント

  • コメントを残す