*

日本語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


 
 

関連記事

Native Instruments MASSIVE のお勉強

マニュアルによるとMASSIVEとは「MASSIVE はダイナミックウェーブテーブルオシレータ、各ル

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(12)空室管理画面 C

空室情報のデータベース処理を一気に終えました。ごちゃごちゃしてきたので、もっとスッキリ書く方法が無い

記事を読む

WordPressのプラグインで独自のページを作る方法がわからない

Wordpressのプラグインを開発していて疑問がでてきました。プラグイン独自のページはどうすればい

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(10)空室管理画面 A

さっそく空室管理画面を作っていきます。今回は画面設計中心です。部屋タイプの選択と、空き情報を更新する

記事を読む

WordPress用プラグインで使う宿泊予約用カレンダーをPHPで書くぜ

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作るシリーズで使う、空き部

記事を読む

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 ↑