WordPressサイトへのWebフォント（woff）導入の手順（コピペでOK！

どうも上かるびです。

先日仕事でWordPressにウェブフォントを入れて欲しいという要望があったのですが、導入の仕方を検索してもすぐに見つかりませんでした。
自己流でやって無事に適用させることができたので共有しておきます。

スポンサードサーチ

WordPressサイトへのWebフォント導入の手順

事前準備：フォントのデータをダウンロードする

下記URLより「@font-faceキット」の方をダウンロードしてください。（このキットにはhtml,cssのサンプルが入ってます）

https://www.cufonfonts.com/font/optima

フォントを使うまでの３つの手順

フォントを使う流れを大まかに説明すると、

①WordPressにwoffファイルをアップロードする

②cssでそのファイルを読み込む＆好きなクラス名でフォントを呼び出せるようにする

③使いたいところにクラス名を追加する

となります。それではやっていきましょう。

①WordPressにwoffファイルをアップロードする

フォントキットをダウンロードしたら解凍し、使用するwoffファイルをWordPressにFTPソフトなどでアップロードします。

（他の所でも大丈夫ですが、フォントなのでfontsに入れておくと何かと便利かと！）

②cssでwoffファイルを読み込む＆好きなクラス名でフォントを呼び出せるようにする

アップロードできたら、フォントを読み込むCSSを書いていきます。

[codetag class="csstag"]CSS[/codetag][copytag]
@font-face {
  font-family: 'Optima';
  font-style: normal;
  font-weight: normal;
  src: local('Optima'), url('fonts/OPTIMA.woff') format('woff');
}

/*↓ここは自分で追記します（クラス名は自分で決める）*/
.font-optima {
  font-family:’Optima’;
}
[/copytag]

（BoldやItalicを使う場合は、ダウンロードしたフォルダ内にあるstyle.cssに書いてあるのでそれもコピペしましょう。）

ちなみになぜここに書くかというと、色んな場所（トップページ、固定ページ、投稿ページなど）で使われることを想定しているからです。

基本的に書く位置はどこでも大丈夫ですが、style.cssには既に他のfont-familyの記述があるので、その近くだと分かりやすいかもです。

③使いたいところにクラス名を追加する

最後に実際にフォントを変えたいところに自分で決めたクラス名（私の場合font-optima）を追加します。

[codetag class="csstag"]CSS[/codetag][copytag]
//記述例
<p class=”font-optima”>ここのフォントがオプティマになる</p>
[/copytag]

スポンサードサーチ

まとめ

もしWordPressのサイトで任意のフォントファミリーを指定された場合はぜひご参考ください。

WordPressの場合、もっとスマートな導入の仕方があると思いますのであくまで一つの方法として試していただければと思います。