【Noto Sans Japanese】ブログの記事を綺麗なフォントで表示したいので最軽量化してみた

2017年9月17日design, WEB制作

前回の記事無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみたに続いて、フォントの話です。

どうしてもそのままだとページ表示速度が遅くなってしまう為に、どうにか出来ないかと色々調べて、実践して効果があった方法をご紹介します。

フォントをサブセット化する

そのままのファイルだとwoffに変換しても12.6MBあるので、サブセットします。
大体の場合、サブセット化する際の目的は【ブログのタイトル】や【見出し】部分など、フォントを適用させたい文字だけをサブセット化させますが、今回は【ブログの記事部分】がターゲットなので、どうすればいいのか悩んでいました。

答えは=第一水準漢字と、記号、ローマ字、カタカナ、ひらがなをサブセット化する、です。

これにより12.6MBのファイルサイズをわずか548KBにまで削減できました。

フォントのサブセット化の方法

武蔵システムさんの無料ツールを使います。
サブセットフォントメーカー

んで軽量化させる為の第一水準漢字のファイルを用意しました。
.txt形式のテキストファイルです。
ご自由にダウンロードして使ってください。

追記 2015/09/25
コメントでご指摘がありましたので、ファイルを修正しました。

現在このブログではnoto fontを使用していません。
サーバーのキャッシュ構造を弄っているので、安定する設定を見つけるまでは、無難なフォント指定にしています。

追記 2015/10/03
ブログデザイン変更によりダウンロードマネージャー廃止したので、下記に直書きしたのでご自由にお使いください。

準備が出来たのでサブセットフォントメーカーをインストールして起動させる。

フォントのサブセット化
フォントのサブセット化

フォントに格納する文字のテキストフィールドに、ダウンロードしたテキストを貼り付ける。
次にwoffコンバーターを起動して、woffに変換

woffに変換
woffに変換

これでファイルの生成は完了です。

備忘録

これでネックだった表示速度に関する問題はほぼ解消しました。
今回の方法は、他の日本語フリーフォントにも使えますので、ライセンスなどに注意して使ってみてください。

同じように綺麗なフォントだと、M+ OUTLINE FONTSがありますね、これとnoto fontどっちにしようか迷っていましたが、最終的にnoto fontに軍配があがりました。

ブログの文字も綺麗になったし、書く気持ちのモチベーションが上がってきたかな。

この記事が気に入ったら
『いいね』しよう!