日本語Webフォントをタイトルに試してみる

WordPressでWEB FONTを利用してみる。モットーは「拾う・貰う・ただ」なのでなんとか無料の方法を探してみるとあるじゃん！！

Google Web Fontsってのは英語だけみたいだし、TypeSquareってモリサワのサービスが魅力的だけど有料だし。amanaimages WEBも無料みたいな有料だし、FONTPLUSやもじでやデコもじとかもあるようだけど有料。

WebFonts として利用できるフリーの和文フォント
http://www.yomotsu.net/wp/?p=565

今回は大好きな「ふい字」ちゃんを使ってタイトルをWEBフォントしてみる。ざっくり言うとフォントをテーマの中にアップしてCSSで指定してあげるという流れのようだ。意外に簡単そう。

環境に問題がなければ　↓　ここがWEBフォントの手書き文字風になっています。

ワードプレスで日本語WEBフォント

最初に文字のダウンロード。

ふい字置き場。
http://hp.vector.co.jp/authors/VA039499/

ダウンロードした「HuiFont29.lzh」を解凍。「HuiFont29.ttf」が目的のフォントデータ。このファイルをテーマフォルダに配置する。childフォルダは子テーマです。

\wp-content\themes\child\HuiFont29.ttf

style.css に以下の内容を書き加える。

@font-face {
    font-family: 'HuiFont29';
    src: local('HuiFont29'),
         local('HuiFont29'),
         url('HuiFont29.ttf') format('truetype');
}

.entry h3 {
	font-family: 'HuiFont29', 'serif';
	font-size: 14px;
	font-size: 1.4rem;
}

こんな感じでフォントを装飾できるようになります。簡単ですね。

しかし、相変わらずのワガママっぷりですが、インターネットエクスプローラー様では追加作業をしないと表示されないようです。ちなみに上記作業での chrome での表示と IE9での表示を画像にしてみます。

chrome　：　無事に手書き風です。

Internet Explorer　：　変換されていません。

IE用には別途作業が必要

先のCSSファイルに次の内容を追記します。

@font-face {
    font-family: 'HuiFont29';
    src: url(HuiFont29.eot);
}

「HuiFont29.ttf」を「HuiFont29.eot」に変換してアップします。TrueTypeをOpenTypeにするという意味みたいです。

変換するには次のサイトサービスが便利です。ファイルを指定して右側の「Convert to .eot」押すだけで変換してくれます。変換後のファイルは自動的にダウンロードされてきます。

http://ttf2eot.sebastiankippe.com/

変換されたファイルを、先ほどと同じ場所（以下の場所）に移動してアップします。

\wp-content\themes\child\HuiFont29.ttf

IEで確認した図です。無事に使えるようですね。大成功です。