2013.9.3 Tuesday - 20:20

M+FONTSを必要な文字だけのWebフォントデータを生成し軽量化できる「M+Web FONTS Subsetter」を試す

M+Web FONTS Subsetterは商用利用可で、かつフォント内容の改変、改変後の再配布にも制限の無いライセンス形態で公開されているM+FONTSのフォントデータを、必要な文字だけ収録したWebフォントデータ（サブセット化）を生成できるオンラインツールです。

M+FONTSは森下浩司氏によってデザインされている日本語ゴシック体です。

M+Web FONTS Subsetter

日本語書体のWebフォントは、フォントデータの容量が大きいことが最大のネック。国内のWebフォントサービスであるTypeSquareやFONTPLUS [フォントプラス]では、Webサイトのページ読み込み時に、ページ内で使われている文字を瞬時に判別し、必要最低限の文字だけを収録したフォントファイルを動的に生成する「ダイナミックサブセット技術」を導入しています。

一方、M+Web FONTS Subsetterは動的ではなく手動でサブセット化したフォントデータを生成します。サブセット化することで、フォントデータを軽量化することでWebページ表示を高速化できるという利点があり、さらにM+FONTSはフリーフォントであり、Webフォントデータそのものをダウンロードして自分で設置できるので、ランニングコスト等の心配がありません。

・・・

使い方は至って簡単。

「フォントブログは、デザイナーが知りたいフォント、書体、タイポグラフィ、Webフォントの情報を発信しています。」という一文に使われている文字だけのサブセット化フォントデータを作ってみます。

お好みのウェイト（太さ）を選択し、上記の一文をテキストエリアに入力します。あとは「変換」ボタンを押して、ダウンロードをするだけ。

M+Web FONTS Subsetter 使い方

ダウンロードデータにはEOT、TTF、WOFF形式の3種類のフォントデータが入っています。この3種類があれば、IE6を含む多くのブラウザで表示することができます。
Webフォントの形式については、古い記事ですが当ブログのWebで任意の書体を使う方法まとめをご覧ください。

M+Web FONTS Subsetter ダウンロードデータ

フォントデータをプレビューすると、さきほど入力した文字のみ収録されているのが確認できます。

M+Web FONTS Subsetter フォントプレビュー

あとはCSSやHTMLで記述をすれば表示することができます。フォント名やファイルのパスは任意で変更してください。

▼CSS

@font-face {
  font-family:'任意のフォント名を定義';
  src: url('../webfonts/mplus-1c-light-sub.eot') format('eot');
  src: url('../webfonts/mplus-1c-light-sub.woff') format('woff');
  src: url('../webfonts/mplus-1c-light-sub.ttf') format('truetype');
}

#title {
  font-family:'定義した任意のフォント名';
}

▼HTML

フォントブログは、デザイナーが知りたいフォント、書体、タイポグラフィ、Webフォントの情報を発信しています。

▼表示サンプル

フォントブログは、デザイナーが知りたいフォント、書体、タイポグラフィ、Webフォントの情報を発信しています。

・・・

入力した文字以外はデフォルトのフォントになってしまいます。文言に変更があった場合は、再度サブセット化の作業を行ってください。

M+FONTSはフリーフォントとは思えないほど高品質で、ウェイトも豊富に用意されています。こんなに簡単にサブセット化できるので、制作中のWebサイトに導入してみてはいかがでしょうか。

M+Web FONTS Subsetter
http://mplus.font-face.jp/

PAGE TOP