日本語フリーフォントをwebフォント化する4ステップ 12


所要時間: 10

日本語フリーフォントをwebフォント化する4ステップ

Googleフォントを始めとしてwebフォントを使用する機会が増えてきましたが、日本語表示できるwebフォントがあまりないので、ライセンス上webフォント化できる日本語フォントを使用する方法を4ステップでご紹介します。

STEP1 日本語フリーフォントを探す

まずはwebフォントとして使用可能な日本語フォントを探しましょう。
以下に2014年2月1日現在webフォントとしてライセンス上使用可能なフォントを列挙しておきます。

ゴシック系

M+ Fonts
http://mplus-fonts.sourceforge.jp/

Rounded M+
https://sites.google.com/site/roundedmplus/

こども丸ゴシック、こども丸ゴシック細め
http://typingart.net/

やさしさゴシック
http://www.fontna.com/blog/379/

明朝系

毛筆系

衡山毛筆フォント
http://opentype.jp/kouzanmouhitufont.htm

青柳衡山フォントT
http://opentype.jp/aoyagikouzanfontt.htm

手書き系

その他

自由の翼フォント
http://tanukifont.com/jiyu-no-tsubasa/

STEP2 フォントのライセンスを確認

webフォントとして使用するには使用ライセンスに従う必要があります。
webフォントとして使用するには、
・サーバにアップしオンラインでの再配布・使用
・ファイル形式変換
・サブセット化
の各許諾が必要です。この他にも商用で使用する場合はその許諾も必要となり、各フォントの使用許諾を熟読した上で使用してください。

またライセンスは随時変更される可能性もありますので、時折確認されることをおすすめします。

STEP3 webフォントファイルを作成

webフォントファイルを作成するには、必要があればサブセット化した上でファイル形式の変換が必要となります。

サブセット化

一般に日本語フォントは、ひらがな・カタカナ・漢字が含まれるため、そのファイル容量がどうしても大きくなりがちです。
そのため、メニューのみや特定の箇所のみ使用するのがページ読み込み時間の短縮やダウンロード容量の低減のためには必要となります。それがサブセット化です。
簡単に言うなれば、使用する文字だけを抜き出したフォントファイルを作成することですね。もちろん、全て使用するんだ!という場合は必要ありません。

使用されるファイル形式

webフォントに使用されるファイル形式は、
 ttf (TrueType)
 otf (Open Type Font)
 woff (Web Open Font Format)
 eot (Embedded Open Type)
 svg (Scalable Vector Graphics Font)
の5形式が使用されています。通常であれば、ttfまたはotf、woff、そしてeotを用意すれば事足りるでしょう。

なお2014年2月現在の各主要ブラウザ最新版の対応状況は以下のとおりです。

ブラウザ ttf/otf eot woff svg
IEブラウザ IE OK OK
Safariブラウザ Safari OK OK OK
Firefoxブラウザ Firefox OK OK
Operaブラウザ Opera OK OK OK
Chromeブラウザ Chrome OK OK OK

使用するアプリ

では、実際にwebフォントファイルを作成してみます。ここでは例としてRounded M+フォントを使って作成してみます。
フォントは別途こちらからダウンロードをしておいてください。

変換に使用するアプリケーションは武蔵システムさんが配布している次のアプリケーションを使用します。これが一番楽です。

サブセットフォントメーカー
こちらはTrueTypeフォント、OpenTypeフォントから指定された文字だけを抜き出して、ファイルサイズを小さくするアプリです。

冒頭でご紹介したM+ Fontはオンラインでサブセット化されたwebフォントファイルを作成ダウンロードできます。M+Web FONTS Subsetterページで、使用したいフォント、文字を入力してボタンをクリックするだけ!
ttfファイル、woffファイル、eotファイルが同梱されているので、あとはCSSとHTMLを記述するだけで使用可能です。M+ Fontを使用する際は利用してみても良いかもしれません。

また、直接webフォントとして使用できるM+ WEB FONTSも用意されています。こちらはサブセット化されていないため、使用には注意が必要です。

WOFFコンバータ
TrueTypeフォント、OpenTypeフォントからwoffファイル、eotファイルを作成できるアプリです。woffファイルからTrueTypeフォント、OpenTypeフォントへの変換も可能です。

他にeotファイルを作成できるMicrosoft謹製のツールがあります。
WEFT (Web Embedding Fonts Tool)
こちらは使用していないので、説明は省略します。

フォントファイルを作成

サブセットフォントメーカーを起動し、必要な情報を入力し新しく生成するサブセット化フォントに格納する文字を入力します。
サブセットフォントメーカーの設定例
この後、woffファイルを作成しますので、「作成終了後、WOFFコンバータを起動する」にチェックを入れておきます。
そして「作成開始」をクリック。

ついでWOFFコンバータが起動しますので、必要な情報を入力します。
ここで忘れずに「EOTファイルを作成する」をチェックします。
WOFFコンバータの設定例
「サンプルHTMLファイルを作成する」をチェックしておくと、どんな感じで表示されるかを実際にHTMLファイルで確認できるので、必要があればチェックします。チェックしたら表示したい文字列を「サンプル文字列」に入力しておきます。
そして「変換開始」をクリック。

生成されたファイルはこのような感じです。

生成ファイルの例

WOFFコンバータでサンプルHTMLを作成していたら、そのファイルをブラウザで開いてみましょう。こんな感じで表示されるはずです。

サンプルHTMLのブラウザ表示例

なおサンプルHTMLのソースを開いてみるとこのようになっています。

サンプルHTMLのソース例

これでめでたくttfファイル、woffファイル、eotファイルが作成されました。
あともう一歩です!

STEP4 CSSの指定

CSSにwebフォントの指定を行います。基本的にはこのような形で指定します。
Rounded M+を使った場合ですと、例えばこのようになります。
(記述するcssファイルのディレクトリにfont/というディレクトリを用意しています)

IEの設定がうざいのですが一部のブラウザに対応するために、少々変わった記述がありますが、これはこういうものだということで覚えておいてください。

なお、otfやsvgを指定する場合は、こちらをそれぞれ追加しておきます。

HTMLファイルには、例えばこんな記述をします。

サブセット化したフォントの場合は、格納していない文字は表示されないので注意が必要でしょう。

Lorem Ipsum、ご存知でしょうか?

Lorem Ipsumとは、出版やウェブデザインなどで使用されるダミーテキストの総称で、元々は欧文なのですが日本語にも拡張した日本語Lorem Ipsumを生成してくれるオンラインサービスもあります。

Lorem Ipsum Generator (英語、ドイツ語、スペイン語、簡体中文)
http://generator.lorem-ipsum.info/

Lorem Ipsum : generateur de faux texte (ラテン語、フランス語、英語、日本語)
http://lorem-ipsum.studiovitamine.com/

日本語Lorem Ipsum
http://lipsum.sugutsukaeru.jp/index.cgi

用途にあったダミーテキスト生成サービスを利用してみてはいかがでしょう?

まとめ

ライセンスさえ問題なければですが、同じ手法で様々なフォントをwebフォントとして使用可能となります。
これまでフォント関連で苦労されていた皆さん、試してみてはいかがでしょうか?

コメントを書いてみませんか?