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://fonts.jp/hanazono/
明朝體フォント むつき
http://mandel59.github.io/mutsuki/index.html
出島明朝
https://code.google.com/p/dejima-fonts/
Tフォント
http://charcenter.t-engine.org/tfont/download_gtset.html
毛筆系
衡山毛筆フォント
http://opentype.jp/kouzanmouhitufont.htm
青柳衡山フォントT
http://opentype.jp/aoyagikouzanfontt.htm
手書き系
りいポップ角
http://www.kcc.zaq.ne.jp/in-mlg/freefont/riipopkk/index.html
りいてがき筆
http://www.kcc.zaq.ne.jp/in-mlg/freefont/riitf/index.html
りいてがきN
http://www.kcc.zaq.ne.jp/in-mlg/freefont/riitn/
たぬき油性マジック
http://tanukifont.com/tanuki-permanent-marker/
しねきゃぷしょん
http://chiphead.jp/font/htm/cinecaption.htm
モフ字
http://www2s.biglobe.ne.jp/~fub/font/mofuji.html
えり字
http://v7.mine.nu/pysco/gallery/font/06.html
きろ字
http://www.ez0.net/distribution/font/kiloji/
みかちゃん
http://www001.upp.so-net.ne.jp/mikachan/
ふい字、まきばフォント、おひさまフォント
http://hp.vector.co.jp/authors/VA039499/
その他
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 |
OK | OK | ||
 Safari |
OK | OK | OK | |
 Firefox |
OK | OK | ||
 Opera |
OK | OK | OK | |
 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ファイルを作成する」をチェックします。
「サンプルHTMLファイルを作成する」をチェックしておくと、どんな感じで表示されるかを実際にHTMLファイルで確認できるので、必要があればチェックします。チェックしたら表示したい文字列を「サンプル文字列」に入力しておきます。
そして「変換開始」をクリック。
生成されたファイルはこのような感じです。
WOFFコンバータでサンプルHTMLを作成していたら、そのファイルをブラウザで開いてみましょう。こんな感じで表示されるはずです。
なおサンプルHTMLのソースを開いてみるとこのようになっています。
これでめでたくttfファイル、woffファイル、eotファイルが作成されました。
あともう一歩です！
STEP4 CSSの指定
CSSにwebフォントの指定を行います。基本的にはこのような形で指定します。
Rounded M+を使った場合ですと、例えばこのようになります。
（記述するcssファイルのディレクトリにfont/というディレクトリを用意しています）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@font-face{ font-family: 'myWebFont'; /* お好きな名前にしましょう */ src: url('font/rounded-l-mplus-subset.eot'); /* IE9以上用 */ src: url('font/rounded-l-mplus-subset.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ url('font/rounded-l-mplus-subset.woff') format('woff'), /* モダンブラウザ用 */ url('font/rounded-l-mplus-subset.ttf') format('truetype'); /* iOS, Android用 */ font-weight: normal; /* 念の為指定しておきます */ font-style: normal; } .myWebFontClass { font-family: 'myWebFont'; } |
IEの設定がうざいのですが一部のブラウザに対応するために、少々変わった記述がありますが、これはこういうものだということで覚えておいてください。
なお、otfやsvgを指定する場合は、こちらをそれぞれ追加しておきます。
|
1 2 |
url('font/rounded-l-mplus-subset.otf') format('opentype') url('font/rounded-l-mplus-subset.svg') format('svg') |
HTMLファイルには、例えばこんな記述をします。
|
1 |
<p class="myWebFontClass>こんなサンプル文字です</p> |
サブセット化したフォントの場合は、格納していない文字は表示されないので注意が必要でしょう。
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フォントとして使用可能となります。
これまでフォント関連で苦労されていた皆さん、試してみてはいかがでしょうか？
Pingback: Webフォントを使ってみます(2)日本語フォント(ライセンスに注意) – capture works and music
Pingback: WEBフォント | WEBデザインの小技集