Googleの日本語webフォントNoto Sans CJK JPを軽くして使う

webサイトのデザインで、Googleの日本語webフォント「Noto Sans CJK JP」を軽くして使う方法について説明します。
このフォントですが、一般的なGoogle Web フォントと違い、容量がとても大きいです。そのため、cssでそのまま読み込むと、表示がとても遅くなります。このままでは実用的ではないので、ファイルサイズを落とし、そのファイルを読みこむように設定します。

GoogleのWebフォント「Noto Sans CJK JP」をダウンロード

最初にフォントをダウンロードしましょう。下記のURLより日本語のセットを選択し、ダウンロードできます。項目が多いのでJapaneseなどで検索すると素早く見つけることが出来ます。

Google Noto Fonts

FireShot Capture 103 - Add new web ‹ などなど _ Nadonado _ - http___nadonado.jp_wp_wp-admin_post-new.php

そのままでは重すぎて使えないので、フォントをサブセット化する

このフォントですが、このままだと、容量が大きすぎてwebに向きません。というのも日本語は種類か多すぎてその分容量も他の言語と比べて大きくなります。そうすると、webを表示するたびに膨大なフォントセットを読みに行くことになるため、この部分で普段使わないものを削除します。 フォントをサブセット化するには、下記のソフトを使います。

サブセットフォントメーカー

フォントに格納する文字の種類は下記を参考にさせていただきました。

格納する文字

スクリーンショット 2016-02-20 11.00.39

続いてそれらをwebで見ることが出来る形式(.woff, .eot, .ttf)に変換します。変換には下記のソフトを使います。

WOFFコンバーター

スクリーンショット 2016-02-20 11.04.01

ttfへの変換は、woffファイルを指定して、変換先に拡張子を変えて変換を押すと変換されます。なお、woffだけでいいかとも思うのですが、IE用にeotとandroid4系用にttfは用意しておいたほうが良さそうです。

設定方法

これらフォントをcssで読みこめば表示できるようになります。

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 100;
    src:    url('../../font/NotoSansCJKjp-Thin.eot');
    src:    url('../../font/NotoSansCJKjp-Thin.eot?#iefix') format('embedded-opentype'),
                url('../../font/NotoSansCJKjp-Thin.woff') format('woff'),
                url('../../font/NotoSansCJKjp-Thin.ttf')  format('truetype');
}

body{font-family:.....;}

ちなみにThinは、スマホで見ると細すぎるのでLightあたりを本文に使うとよい感じでした。

コメントを残す