IT・コンピューター

WordPressに日本語手書きフォントを設定する

WordPressを使い始めると出てくる病気がカスタマイズ症候群。ガチガチに制限された人気ブログサービスとは比べものにならないほどカスタマイズ性に富むんだな(/_;) 今回は一度やってみたかった手書きフォントにヘンシーン！

子テーマのcssスタイルシートに以下の11行目以下を追記します

@charset "UTF-8";

@import url("../simplicity/style.css");



/*

Theme Name: Simplicity child

Template: simplicity

*/



/* Simplicity子テーマ用のスタイルを書く */



/* Webフォント */

/* IE */

@font-face {

font-family: ○○○○;

src: url(/wp-content/themes/○○○○.eot);

}

/* Firefox, Opera, Safari */

@font-face {

font-family: ○○○○;

src: url(/wp-content/themes/○○○○.ttf) format("truetype");

}



/* ヘッダー */

#header  {font-family: ○○○○}



/* 本文 */

#body  {font-family: ○○○○}



/* フッター */

#footer  {font-family: ○○○○}



/* フッターウィジット */

#footer-widget  {font-family: ○○○○}



/* ナビメニュー */

#navi  {font-family: ○○○○}

手書きフォントを自分のサイトにアップロードします。

今回使用してみた手書きフォントはコチラ。あずきフォントさんに多謝。

[browser-shot width="680" url="http://azukifont.com/font/azuki.html"]

おっちゃんは、等幅よりもプロポーショナルフォントを使わせていただきます。

firefox、safariのブラウザ表示用にttfファイルを自分のテーマの直下にアップロードします。

IEユーザーのためにも手書きフォントが適用されるようにeotファイルに変換したものを同じ場所にアップロードします。

ttfファイルをeotファイルに変換してくれるサイトはコチラ！

以上で、準備完了。

子テーマのCSSスタイルシートに追記する23行目以下はご自分の親テーマのheaderタグやbodyタグはたまた、footerタグやfooter-widgetタグなどなど手書きフォントを適用させたいid名毎にフォントを指定してあげます。

23行目以下はおっちゃんはヘッダー部分からフッター部分までぜーんぶ、手書き風ブログに仕上げたかったので、以下の5か所を書いたという事になるんだな！

1. ヘッダータイトルにあたるheaderは、#header　のみです。

2. 本文にあたるbodyは、#body　のみ。

3. 著作表示の最下段のfooterは、#footer　のみ。

4. 本文下のグレーのウィジット部分にあたるfooter-widgetは、#footer-widget　のみ。

5. ヘッダー画像部分のナビゲーションメニューにあたるnaviは、#navi　のみ。

それぞれ、ご自分のテーマのCSSスタイルシートの書き方によって多少は違いますが、詳しい説明はこちらaiさんのサイトがたいへんわかりやすく説明されています。

やり方はわかったんだが、表示までに今までの2倍くらい遅くなってしまうんだな(´･?･｀)h2タグとh3タグくらいの限定フォントにするくらいが限界なんだな(´･?･｀)
あまり、全文手書きフォントブログを見かけないのは、表示ストレスなんだな！
手書きの良さは暖かみ。タイトルロゴの画像化に使うといいんだな！

 

2週間ほど日本語手書き風フォントを試行してみた結果、表示速度が遅くなったんだな！検索した記事の表示時間は早いに越したことはないんだな・・・。ということで、子テーマに記述した内容をコメントアウトするだけでOK。

再び、手書き風フォントにしたい場合はコメントアウトを消すと楽なんだな