WordPressのフォント変更方法

WordPressで好きなフォントに変更したい!という人はたくさんいるでしょう。

だがしかし…どうやって変更すれば、と思って調べてみれば便利そうなプラングインがたくさん見つかると思います。

いろいろ試してみました、結論をいうと自分でやったほうがいい。

理由を挙げると

  • サイトに登録ってなに
  • 無料だと一個しか登録できないってなに
  • テーマファイルのフォントに上書きされるってなに
  • 頑張ってテーマいじってもテーマが更新されると戻っちゃうってなに

もうフラストレーションの嵐

自分でやる

フォントのアップ先

手元にフォントファイルがある場合は、フォントをアップロード(サーバ上に置く)します。
画面から参照できればどこでもいいですが、どこでもいいとか一番困っちゃうパターンだと思うので決めておきます。

/wp-includes/fonts/

ここに好きなフォントを入れてください。このフォルダは元々あるフォルダです(あるよね?)。
Webフォントを使用する場合はこの手順は不要です。

CSSを書く

カスタムCSSで独自のCSSを書きます。

@font-face

最初にフォントの設定を行います。

@font-face { font-family: logotype; src: url(/wp-includes/fonts/logotypejp_mp_b_1.ttf) format("truetype"); }
@font-face { font-family: badhead; src: url(/wp-includes/fonts/BadheadTypeface.otf) format("opentype"); }

srcは /wp-includes/fonts/フォントファイル名 このように指定します。頭のスラッシュが微妙に重要です。指定しない場合、個別ページなどでフォントが適用されない場合があります。

フォントの適用

次に設定したフォントを好きな場所に適用します。

サイトのタイトルフォントを変更する場合
.site-title {
  font-family: badhead;
}
Hタグを変更する場合
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-family: logotype!important;
}

注意)これらの記述内容はあくまでサンプルですので正しく動作しない可能性があります。

フォントを適用させるクラス名などが知りたい場合、サイトを開き開発ツールなどでその要素を調べると、ファイルを漁るよりは簡単にクラス名などがわかると思います。よくわからないという方はGoogle ChromeやFirefoxの開発ツールについて調べてください。

設定は以上です。フォントは変更できましたか?

WordPressのフォントを変えてみる

プラグイン検索「font」で検索すると「Use Any Font」というプラグインがよさそうだったので使ってみた。

インストール後、設定メニューの「Use Any Font」を選択して設定。

API KEYの認証が必要?とりあえずFreeで登録。必須入力項目がめんどう。

認証後早速フォントを変更してみる。

Webフォントも設定できるとよかったんだけど使えないみたい?

[Add Fonts]から適当にフォントをアップロード。

次に[Assign Font]でアップロードしたフォントをどこに適用させるか設定。

スクリーンショット 2015-01-19 11.50.28

チェックボックスで簡単に設定できる。

さらにCustom ElementsでIDやClassの指定もできる。便利。

テストなんで、Allにチェックして設定変更。

スクリーンショット 2015-01-19 11.53.55

フォントが変わった!