WebフォントをWordPress全体で使用する
Webフォントの準備
まずは、使いたいと思っているWebフォントを準備しなければなりません。
どこからか入手したWebフォントでもいいですし、自分で作成したWebフォントでもOK.
自分で作成する方法はこちら↓
フォントのファイル形式は、
のページを参考にさせていただき、最近のウェブブラウザだと”OTF”と”WOFF”があれば対応できそう・・・ということで、ここではOTFとWOFFを用いた方法をご紹介します。
自分で作成したWebフォントファイルやダウンロードしたファイルが”OTF”や”TTF”のみであった場合、フリーソフトの「WOFFコンバータ」でファイル形式を変換し、”WOFF”ファイルを作ります。
「窓の杜」からもダウンロードできます↓
スタートメニュー→すべてのプログラム→WOFFコンバータ
で起動。
上のようなウィンドウが表示されるので、「変換前ファイル」に元の”OTF/TTF”ファイルを選択し、他は特に入力せず、下の「変換開始」をクリックします。
すると、
「正常に変換しました。」というコメントが出て、元ファイルと同じフォルダ内に”WOFF”ファイルが完成しています。
続いて、フォントファイルをアップロードします。
場所は分かりやすく、自分が使っているテーマフォルダ内に、”fonts”というフォルダを新たに作り、その中に”WOFF””TTF/OTF”ファイルをアップロードします。
上は”twentyfourteen”というテーマを使っている場合ですが、丸で囲ったように、”fonts”フォルダを作成しました。
この中にフォントファイルを入れます。
フォルダ内はこのような感じです。
style.cssを書き換える
のページを主に参考にさせていただきました。
自分が使っているテーマの”style.css”のGENERAL STYLINGの記述が始まってすぐの場所に、
[php]
/* Ligature Symbols */
@font-face {
font-family: ‘LigatureSymbols’;
src: url(‘./fonts/TSM_font001.woff’) format(‘woff’),
url(‘./fonts/TSM_font001.otf’) format(‘opentype’);
font-weight: normal;
font-style: normal;
}
[/php]
のように記述します。
ここでは”TSM_font001″というフォントを使用していますが、ここにアップロードしたファイル名を入力します。
続いて、style.css内にある、ありとあらゆる”font-family:”を探し出し、それに続く最初の部分に、’LigatureSymbols’と入れると、優先的に指定したフォントを使用してくれます。
ただし、フォントファイル内に存在しない文字のために、他のフォント名も残しておきます。
[php]
font-family: ‘LigatureSymbols’, ‘Open Sans’, sans-serif;
[/php]
こんな感じです。これで、サイト内のフォントが変更されたはずです！
当サイトでのビフォーアフターはこんな感じです。
ビフォー
アフター
残念ながら漢字はまだ作っていないので、漢字は既存のフォントです。