Webフォントの使い方
WordpressのフォントにWebフォントを使用する場合の自分用のメモです。
テスト用に使用したテーマは『Twenty Eleven』及び、使用させていただいたフォントは『あんずいろapricot×color』さんの『あんずもじ奏』です。
下準備としてダウンロードしたttfファイルをWebサービス『ttf2eot』を使いIE用のeotファイルを用意。2つのファイルを任意のサーバーにアップロードしておく。
WordPressのテーマの編集からCSSに以下のコードを記入する。フォントの名前は『Anzu』とさせて頂きました。
/* Fonts Import
--------------------------------------------- */
/* IE */
@font-face {
font-family: Anzu;
src: url(eotファイルまでのパス);
}
/* Firefox, Opera, Safari */
@font-face {
font-family: Anzu;
src: url(ttfファイルまでのパス) format("truetype");
}
こんな感じ。
以下、変えたい部分の font-family を場合によっては全て Anzu に変更する。
font-family: Anzu;
多分 font も同じように全て変更するのだと思います。
出来上がり。メニューを含めてかなりのインパクト。
【注意】
フリーフォントを使用する場合は必ずライセンス条項をお読み下さい。
Special Thanks ♪
あんずいろapricot×color