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

2015年6月18日design, WEB制作

■2015年1/5日追記
フォントのサブセット化でブログ本文にフォントを適用しても、ページ表示速度低下をかなり軽減できるようにしました。
第一水準漢字を使いサブセット化する事で、12.6MBのファイルサイズをわずか548KBにまで削減出来ました。
その方法は下記ページで解説しています。プラス第一水準漢字のテキストファイルも配布しています。

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

ちなみに当ブログでは、スマホ表示の際にはフォントはデフォルトのものを使用しています。
wihi環境のアクセスなら表示速度に問題はないんですが、3G環境だとやはり表示速度が遅いので・・・。

googleとadobeが共同開発したという【Noto Sans Japanese】フォント
あまりにも綺麗で文章も読みやすいので、ブログに使ってみました。
個人的にはリュウミンpr5と並ぶくらい好き。

ライセンスもApache License 2.0なので、ライセンスのルールを守ることで再配布や、修正、カスタマイズしたフォントの公開も出来る!凄い!

各書体はこんな感じです。

noto fonts 書体一覧
noto fonts 書体一覧

スポンサーリンク

使い方

Noto Sans CJK JP
Noto Sans CJK JP

Google Noto Fontsから【Noto Sans Javanese 】【Noto Sans CJK JP】をダウンロードして、直接使う方法と、Google Fonts : Early Accessで提供されているものを使う方法があります。

google web fonts
google web fonts

googleから提供されているWEBフォントを使う場合の記述は簡単です。
CSSファイルに、以下を記述するだけ。

適用する部分のセレクタは各々変えてください。

ダウンロードしたファイルを使う場合

notoフォント 解凍
notoフォント 解凍

ダウンロードしたzipを解凍すると中には、7書体のファイルが入っています。

ダウンロードしたファイルを使う場合は結構ファイルサイズが大きいので、ページ表示速度が遅くなります。
なので、ちょっとでもファイルサイズを減らす為に【woff】に変換します。

WOFFコンバータ

武蔵システムさんがフリーで公開されているWOFFコンバータを使います。

ダウンロード後、インストールして起動!

武蔵システムwoffコンバーター
武蔵システムwoffコンバーター

変換前のファイルに、変換したいフォントファイルを指定して、変換後ファイルの欄に、変換したファイルを格納するフォルダを指定します。
IE対策する場合は、EOTファイルも作っておく。

んで、変換完了したら【woff】と【eot】ファイルが生成される。
あとは生成されたファイルを、任意のディレクトリに配置して、cssファイルにコードを書く。

※下記コード例は、【fonts】フォルダの中にフォントファイルを置いた例

変換前のファイルサイズは15.4MBで、woffに変換したら、12.6MBになりました。
劇的なサイズ削減にはなりませんが、少しでも軽くしたい場合はやった方がいいです。

まだまだ重いので軽くしたい

Webフォントをできるだけ軽く表示する圧縮の.htaccessや遅延ロードJSを作ってみた | 編集長ブログ―安田英久 | Web担当者Forum

こちらの記事を参考させていただきました。

IE対策はええや~っと思ったので、使うファイルは【woff】のみにしました。
プログレッシブエンハンスメントッ!プログレッシブエンハンスメントッ!←言いたいだけ

色々試してみたけど、大分表示速度が落ちてしまう。。。
仕方ないけど、ブログの記事本文は綺麗なフォントで表示したい!

そのうちとても賢い方が、素敵な技術を編み出してくれるに違いないので、ちょっと表示速度下がるけどこのまま運営していきます。

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


PAGE TOP