日本語フリーフォントをwebフォント化する4ステップ / hirok-k.com

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

目　次

1 STEP1 日本語フリーフォントを探す
2 STEP2 フォントのライセンスを確認
3 STEP3 webフォントファイルを作成
4 STEP4 CSSの指定
- 4.1 Lorem Ipsum、ご存知でしょうか？
5 まとめ

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://hp.vector.co.jp/authors/VA039499/

その他

自由の翼フォント
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		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/というディレクトリを用意しています）

@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フォントとして使用可能となります。
これまでフォント関連で苦労されていた皆さん、試してみてはいかがでしょうか？

hirok-k.com

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

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

ゴシック系

明朝系

毛筆系

手書き系

その他

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

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

サブセット化

使用されるファイル形式

使用するアプリ

フォントファイルを作成

STEP4 CSSの指定

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

まとめ

コメントを書いてみませんか？コメントをキャンセル

2 thoughts on “日本語フリーフォントをwebフォント化する4ステップ”

共有:

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

ゴシック系

明朝系

毛筆系

手書き系

その他

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

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

サブセット化

使用されるファイル形式

使用するアプリ

フォントファイルを作成

STEP4 CSSの指定

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

まとめ

共有:

この記事に関連したオススメポスト

週間人気ポスト

コメントを書いてみませんか？ コメントをキャンセル

2 thoughts on “日本語フリーフォントをwebフォント化する4ステップ”

コメントを書いてみませんか？コメントをキャンセル