日本語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で確認した図です。無事に使えるようですね。大成功です。
Sponsored Link
関連記事
-
-
Native Instruments MASSIVE のお勉強
マニュアルによるとMASSIVEとは「MASSIVE はダイナミックウェーブテーブルオシレータ、各ル
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(3)
前回のソースがイマイチだったので若干書き直しました。しかし、これで正しいのかも疑問なんですが、取り敢
-
-
WordPress用プラグインで使う宿泊予約用カレンダーをPHPで書くぜ
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作るシリーズで使う、空き部
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(7)セキュリティ対策
ここでセキュリティ対策についてまとめて復習してみます。ネットを検索すると、さまざまな対策が紹介されて
-
-
ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(4)データベース基礎
今回はWordPressのプラグイン開発で必要になるデータベースに関する知識ついて調べました。この辺
Comment
[…] 日本語Webフォントをタイトルに試してみる | overfree […]
ご質問は掲示板へお願いいたします。