ma-bou

【css】NotoフォントをWeb fontとして使ってみよう!(圧縮編)

前回、Google先生のツンデレにより撃沈した、Notoフォント補完計画。

あんまり悔しくて8時間しか眠れませんでした。


仕方ないので、自分でフォントをアップロードするぜ!

の前にフォントファイルの軽量化もしないとね、、、という自分的メモ。

とりあえず、ダウンロード

Google先生からダウンロードしましょう。

Beautiful and free fonts for all languages – Google

右上のダウンロードボタンをぽちっと

スクリーンショット

ダウンロードされた「NotoSansCJKJP-hinted」を解凍すると

NotoSansCJKJP-hinted

・ NotoSansJP-Black.otf

・ NotoSansJP-Bold.otf

・ NotoSansJP-DemiLight.otf

・ NotoSansJP-Light.otf

・ NotoSansJP-Medium.otf

・ NotoSansJP-Regular.otf

・ NotoSansJP-Thin-Windows.otf

と、7つのウエイトがコンニチハ。

一つのファイルだけでも15MB以上あるヘビー級なので、このまま使うのはデインジャラスです。

だので、使用する文字列だけ抽出し軽量化を図ります。

 (サーバへのトラフィックを軽減し、閲覧時に少しでも早く表示されるようにしないとね。)

サブセット化してフォントファイルのダイエット

ここからは「NotoSansJP-Medium.otf」を使用してダイエット

使用するソフトは2つ

・ サブセットフォントメーカー(サブセット化ソフト)

・ WOFFコンバータ(WOFFファイル作成ソフト)

サブセットフォントメーカーを使って必要な文字列を抽出

上記2つのソフトをインストール。

サブセットフォントメーカーを起動 したものがこちら

スクリーンショット

参照から 、ダウンロード済みの 「NotoSansJP-Medium.otf」  を選択。

作成後のフォントファイルの名前もここでつける。

NotoSansCJKJP-hinted1

今回は第一水準漢字に従って、ファイルを抽出します。

第一水準漢字とは

JIS第1水準は2965字で、常用漢字1945字とその他の人名用漢字が含まれており、通常文書であればJIS第1水準の文字だけで記述できるとされている。

JIS漢字水準 とは – コトバンク.

 これさえ押えとけば最低限なんとかなっちゃうかも♪ な便利な漢字のセット。

 「フォントに格納する文字」に第一水準漢字を入力

一番下の作成開始をポチっと。

NotoSansCJKJP-hinted2

WOFFコンバータを使って変換

作成後終了後、WOFFコンバータを起動するにチェックを入れておくと

自動的にWOFFコンバータが起動してくれる親切設計。

(事前のインストールを忘れずに)

起動後、「EOTファイルを作成する」チェックを入れて、変換開始をクリック。

woffconv220

変換後のフォルダがこちら

woffconv220_1

・ NotoSansCJKjp-Medium-Subset.eot(IE対策用)

・ NotoSansCJKjp-Medium-Subset.html(表示サンプル用HTMLファイル)

・ NotoSansCJKjp-Medium-Subset.woff(上記以外ブラウザ用)

・ NotoSansCJKjp-Medium.otf(圧縮前ファイル)

・ NotoSansCJKjp-Medium-Subset.otf(圧縮後ファイル)

サイズが劇的に小さくなっているのが分かると思います。

「NotoSansCJKjp-Medium-Subset.html」をブラウザで開くと

 

sample_html

こんな感じに表示されて確認できます。

 [結論]

ずいぶんダラダラとながくなってしましましたが、先人たちの知恵&便利なツールのおかげで なんとか軽量化にすることができました。

つぎは、いよいよwebフォント化です!!

次回(自鯖編)につづく。

[参考LINK]

ちょっと話題になってたから「Google Noto Fonts」を触ってみた – WP-E(仮)Web Professional Education 日本語フリーフォントをwebフォント化する4ステップ / hirok-k.com サブセットフォントメーカー WOFFコンバータ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>