*

日本語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 プラグインを作る(9)空室管理画面を考える

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

記事を読む

WordPress のドメインごとサーバー移転が完了

要はドメインもそのままでレンタルサーバーだけ違う会社に移転したってことです。思ったよりカナリ簡単にで

記事を読む

iPad で WordPressを更新する時に使うアプリ

お出かけ先でもブログの更新をしたい時がありますよね?できたらiPadだけで簡単に作業できたらいいなと

記事を読む

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

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

記事を読む

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

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

記事を読む

Comment


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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

GoPro HERO7 Black 〜 インフルの熱で異常行動か?

何故か記憶に無いのですが GoPro HERO7 Blackが届きまし

軽量レバーロック式三脚を物色する美少女

旅行用三脚として活躍しているのは GITZO GT1542T と KT

激安中華な Bluetooth 5.0 イヤホンを買ってみたけど便利ね

前から気になっていた Bluetooth 5.0 イヤホン。 耳

2018年に購入したもので最も良かったものはミニスライダー

あけまして おめでとうございます 2019年 第一発目にご紹介す

Final Cut Pro X 用の無料 Calloutsプラグイン13種&12種がいい感じ

すっかり Final Cut ネタが続きますが皆様いかがお過ごしでしょ

→もっと見る




  •  

PAGE TOP ↑