*

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

公開日: : 最終更新日:2013/06/05 WEBDESIGN , ,

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

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

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

22222

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

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

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

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

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

3333

ダウンロードした「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 : 無事に手書き風です。
11111

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

IE用には別途作業が必要

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

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

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

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

http://ttf2eot.sebastiankippe.com/
111

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

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

3333

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


Sponsored Link


 
 

関連記事

WordPressのプラグイン開発を効率的にするフレームワークたち

Wordpressでプラグインを作っていて「フレームワーク使えないのかな?」と疑問を持ちました。そこ

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(7)セキュリティ対策

ここでセキュリティ対策についてまとめて復習してみます。ネットを検索すると、さまざまな対策が紹介されて

記事を読む

WordPressのプラグインNextGEN GalleryがResponsiveテーマで不具合

WordPress 3.5.2でNextGEN Galleryプラグインを有効にするとレスポンシブテ

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(6)初期設定画面

ここまでで、ひと通りの仕組みというか流れは理解できたような気がします。まずは初期設定画面から制作して

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(5)メニュー階層化

今回はオリジナルプラグインの管理画面でのメニュー作成について。かなりすんなりと出来てしまったので短め

記事を読む

Comment


ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑