WebフォントをWordPress全体で使用する

Webフォントの準備

まずは、使いたいと思っているWebフォントを準備しなければなりません。

どこからか入手したWebフォントでもいいですし、自分で作成したWebフォントでもOK.

自分で作成する方法はこちら↓

Webフォントを作成する その2
早速フォント作りです。 paintfont.comというサイトで作りました。無料で簡単にフォントを作成でき、しかも作成したフォントの権利は...

フォントのファイル形式は、

materialize.jp

のページを参考にさせていただき、最近のウェブブラウザだと”OTF”と”WOFF”があれば対応できそう・・・ということで、ここではOTFとWOFFを用いた方法をご紹介します。

自分で作成したWebフォントファイルやダウンロードしたファイルが”OTF”や”TTF”のみであった場合、フリーソフトの「WOFFコンバータ」でファイル形式を変換し、”WOFF”ファイルを作ります。

「窓の杜」からもダウンロードできます↓

窓の杜からダウンロード

スタートメニュー→すべてのプログラム→WOFFコンバータ

で起動。

上のようなウィンドウが表示されるので、「変換前ファイル」に元の”OTF/TTF”ファイルを選択し、他は特に入力せず、下の「変換開始」をクリックします。
すると、

「正常に変換しました。」というコメントが出て、元ファイルと同じフォルダ内に”WOFF”ファイルが完成しています。

続いて、フォントファイルをアップロードします。

場所は分かりやすく、自分が使っているテーマフォルダ内に、”fonts”というフォルダを新たに作り、その中に”WOFF””TTF/OTF”ファイルをアップロードします。

上は”twentyfourteen”というテーマを使っている場合ですが、丸で囲ったように、”fonts”フォルダを作成しました。
この中にフォントファイルを入れます。

フォルダ内はこのような感じです。

style.cssを書き換える

http://k-sakura.info/box/web-fonts/

のページを主に参考にさせていただきました。

自分が使っているテーマの”style.css”のGENERAL STYLINGの記述が始まってすぐの場所に、


/* 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;
}

のように記述します。

ここでは”TSM_font001″というフォントを使用していますが、ここにアップロードしたファイル名を入力します。

続いて、style.css内にある、ありとあらゆる”font-family:”を探し出し、それに続く最初の部分に、’LigatureSymbols’と入れると、優先的に指定したフォントを使用してくれます。

ただし、フォントファイル内に存在しない文字のために、他のフォント名も残しておきます。


font-family: 'LigatureSymbols', 'Open Sans', sans-serif;

こんな感じです。これで、サイト内のフォントが変更されたはずです!

当サイトでのビフォーアフターはこんな感じです。

ビフォー

アフター

残念ながら漢字はまだ作っていないので、漢字は既存のフォントです。

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする