日本語フリーフォントをwebフォント化してwebサイトに使用する方法

CATEGORY : column

日本語フリーフォントをwebフォント化してwebサイトに使用する方法

main_catch

最近webサイトでグーグルwebフォントを使用して画像を使用せずに魅力的なテキスト装飾をされているサイト(最近といっても2,3年前から普通に見かけますが・・・)をよく見かけます。ただ、グーグルのwebフォントは日本語が今のところ一種類しか無いので、フリーで公開されている日本語フォントをwebフォントに変換してサイトに使用する方法を今回はお届けします。

使用したいフォントのライセンスを確認する。

今回の記事で参考にさせて頂いたサイトにもステップ毎に表記されているのですが、フリーで公開されている日本語フォントをwebフォントに変換する場合、注意しなければいけないのが、フォントのライセンスになります。フォント利用規約などを確認して貰えばそのフォントのライセンスが分かると思いますが、「いや権利関係は苦手です!!」という方は 「hirok-k.comさん」こちらのサイトでwebフォントとして利用できるフォントを調査されているので、参考にして頂ければと思います。 この記事では8×8 ドット日本語フォント「美咲フォント」を使用させて頂きます。

使用したいフォントの形式をwebフォントで使用できるように変更する。

webフォントとして利用できる形式として…

■ttf (TrueType)
■otf (Open Type Font)
■woff (Web Open Font Format)
■eot (Embedded Open Type)
■svg (Scalable Vector Graphics Font)

上記5つの形式が存在します。

そして各ブラウザのwebfontフォーマットの対応状況です。

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

そして日本語フォントは「ひらがな/カタカナ/漢字」とアルファベットで形成されるフォントよりデータが格段に重いためページ読み込み時に少し時間が掛かってしまいます。そんな時はフォントをサブセット化して使用する文字のみ設定すれば、かなりフォントデータを軽量化できます。

今回はサブセット化せずにやっていきます。←※めんどくさいからじゃないですよ(笑)webフォント化したい文字列が増えたら毎回サブセット化をやり直さないといけなくなるからですよ(笑)

フォントのwebフォント化は武蔵システムさんWOFFコンバータを使用させて頂きます。

WOFFコンバータをダウンロード→起動すると

img01

上記画面が表示されます、変換するフォントを指定して、「.eotファイルを作成する」にチェックを入れて下さい。サンプルをHTMLで確認したい時はその下の項目にもチェックを入れると確認用htmlが作成されます。後は「作成開始」をクリックするだけ!!

HTML/CSSのマークアップ

CSSのマークアップ

HTMLのマークアップ

以上で完成となります。ちなみに今回作成したサンプルはこちらです。
初回読み込み時はフォントが適用されるまでタイムラグがありますので、フォントが適用されていない場合はしばらくお待ちください

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

contact_bana