最近個性的な文字のページをよく見かけるようになってきました。
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~ |
○ ○ |
○ ○ |
× ○ |