*

日本語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 プラグインを作る(2)

前回の物を若干変更しながら、どんどん進んでいきたいと思います。今回は管理画面の表示内容について行って

記事を読む

ワードプレス用宿泊予約プラグイン開発「空室情報の表示」とか

久しぶりのワードプレスネタ。全然完成しませんわ。今回は最初にブラウザのキャッシュを切る作業をしました

記事を読む

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

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

記事を読む

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

前回までで基本的なプラグインの制作方法を簡単に学びました。今回からは空室管理の画面を作ってみます。柔

記事を読む

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る(1)

初心者が、あらためて WordPress のプラグインを一から作る経過報告。たぶん連載記事ですね。途

記事を読む

Comment


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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

DJI Osmo Mobile 2 を少し使ってみた感想など

BlackMagicDesign URSA mini 4.

DJI Osmo Mobile 2 の少しディープなレビュー

DJI Osmo Mobile 2 を選んだのは「アクティブトラック」

スマホ用ジンバル比較=DJI OSMO mobile2 vs ZHIYUN Smooth 4 vs MOZA mini-mi

さて! 聞いて気になる見て欲しくなる。うれし恥ずかしスマホ用ジンバルの

【実験】Neewer 37mmクリップオンND 2-400 NDフィルタークリップ付きの性能を確認

前回の記事「FiLMiC pro 〜 iPhoneで動画撮影本気モード

FiLMiC pro 〜 iPhoneで動画撮影本気モード

俄然! iPhoneの有効活用が気になり始めました。 前回プレビ

→もっと見る




  •  

PAGE TOP ↑