Webフォントを利用する

最近個性的な文字のページをよく見かけるようになってきました。
Wordpressを使用する上でネックだったフォント問題は、『日本語フォントを設定する』で解決できましたが、「もっと違う文字も使ってみたい・・・。」そんな時に利用できる、日本語のフリーフォントをWebフォントとして利用する方法を調べてみました。

日本語フリーフォントって？

個人利用、または商用利用可能なフリーのフォントです。それぞれ利用条件、ライセンス内容が異なりますが、多くの作者さんが素敵なフォントを公開してくださっています。『日本語フリーフォント』で検索すれば沢山出てきますので、好きなフォントを探してみます。

フォントをダウンロード＆ライセンス確認

使いたいフォントが決まったら、まずはダウンロードします。ライセンス内容を確認し、Webフォントとして利用しても問題ないか確認しましょう。
今回は、『はんなり明朝』を使ってみようと思います。

WordPressにWebフォントを設定する

1.Webフォントのファイルを作成する。
各ブラウザによって、使用できる形式が異なる為、Webフォントを利用する際は、複数のファイル形式でファイルを用意する必要があります。（下記、おまけ参照）
今回利用する、『はんなり明朝』では、「otf」ファイルしかないため、他のファイルを作成します。
まずは、「otf」→「ttf」変換をするため、『Dan’s Tools』さんで変換をします。
ファイルを選択し、出力先を「ttf」にして変換するを押せばファイルが出来上がります。

次に、「ttf」→「eot」変換のために、『WOFFコンバータ』を使用しました。

「変換前ファイル」にダウンロードしたファイルを選択し、「EOTファイルを作成する」にチェックを入れます。
後で確認しやすいので、「サンプルHTMLファイルを作成する」にもチェックを入れましょう。
「変換開始」ボタンを押せば完了です。

2.Webフォントをサーバーへアップする
できたがった、woff ファイルと、otf ファイルをサーバーにアップします。Wordpressで使用しているテーマの、style.css ファイルがあるフォルダに入れておくと分かりやすいと思います。

3.cssの設定をする
cssに次のように設定します。

@font-face {
　　font-family: "Hannari";
　　　　 src: url('Hannari.eot'); 
　　　　 src: url('Hannari.eot?#iefix') format('embedded-opentype'), 
    　  　　　url('Hannari.woff') format('woff'), 
    　　　　  url('Hannari.ttf')  format('truetype'); 
}
　.webfont01 {
 　　font-family: 'Hannari';
　}

htmlでは次のように記述します。

<p class="webfont01">『はんなり明朝』はこんなフォントです</p>

4.表示結果

『はんなり明朝』はこんなフォントです

おまけ　Webフォントに使用されるファイル形式

webフォントには、次の5形式のファイルが使用されています。
それぞれ対応しているブラウザが異なるので、複数のファイルを設定してあげる必要があります。

ブラウザ	ttf	otf	woff	eot	svg
IE4～ IE9～			× ○	○ ○
Chrome4～ Chrome6～	○ ○	○ ○	× ○		○ ○
Safari3.1～ Safari5.1～	○ ○	○ ○	× ○		○ ○
Opera10～ Opera11.1～	○ ○	○ ○	× ○		○ ○
Firefox3.5～ Firefox3.6～	○ ○	○ ○	× ○
iOS4.2～ iOS5.0～	○ ○	○ ○	× ○		○ ○
Android2.2～ Android4.4～	○ ○	○ ○	× ○