WordPressでフォントを変更する方法【他ブラウザやAFFINGERも考慮】

WordPressで綺麗なフォントに変更するには？
Windows、Mac両方のChromeやFirefoxにも対応するのはかなりの工夫が必要って本当？
AFFINGERではどう設定したらいい？
こんな疑問に答えます。

僕はWordPressの有料テーマAFFINGERを３年以上使用しています。
そんな僕が、WordPressでフォントを変更する方法を解説していきます。

作業環境

WordPress 4.9.8
AFFINGER 20181025

※記事内にプロモーションを含む場合があります

WordPressでフォントを変更する方法【Windowsに配慮】

フォント変更する方法の前提知識

WordPressでフォントを変更する方法は以下の特徴があります。

・フォント問題は超複雑で毎年ごとに状況と対策が変わる
・游ゴシックを使用するのが現時点での主流
・何も考えずに游ゴシックに設定すると、WindowsのGoogle Chromeでかすれて表示される

これらの前提をまず理解することができました。
特にこちらのサイト様を参考にさせていただきました。
» 参考：游ゴシックのfont-family指定方法2018年度版！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証

Webフォントは重い・有料・ダサいなどの課題が多いので却下

Webフォントも検討しました。

・日本語のWebフォントは重い
https://webtan.impress.co.jp/e/2016/02/17/22106
・エックスサーバーで無料で使えるWebフォントはちょっと自分の好みではない
https://www.xserver.ne.jp/functions/service_webfont.php
・モリサワと契約して使うWebフォントは契約料が高い
https://typesquare.com/ja/service/plan

これらの理由で今回は却下しました。

ブラウザでの履歴を消してチェックするのを忘れない

作業するときはブラウザの履歴を消さないと、変更が反映されているか判断しにくいです。
直近１時間の履歴を消すを選べば、クッキーなどには影響ないので便利です。

AFFINGERでfont-familyを指定する方法

基本的にはAFFINGERのフォント設定画面から指定していきます。
会員限定ですが、こちらのページに書いてあります。

http://affinger5.com/manual/post-6823/
http://affinger5.com/manual/post-6717/

こちらの設定画面では見出しやウィジェットなどのフォントは柔軟に設定できます。
ただ現時点では「本文のフォント」は簡単に設定できないようになっています。

おそらく個人的な予想ですが、游ゴシック問題などをクリアにした上で、今後のアップデートで実装されるのではと思います。

クラス名を指定すれば本文フォントも設定画面で変えられる

クラス名の部分に「*,code」
と入れれば、本文フォントもここで変えられます。

ただ、*とcodeがおそらく一括変換という意味です。
他のテーマではbodyやhentryといったクラス名が多い気がします。

WordPressでフォント変更の手法４つを比較【他ブラウザやAFFINGER環境を考慮】

先ほどのサイト様の説明を含めて４つの方法を実践していきます。

４つの手法の比較一覧

游ゴシックに一括指定 font-weightを500にする 游ゴシック Mediumを使用して場合分け Windowsはメイリオで割り切る
Mac Safari 綺麗 見出しや太字が細字になる 綺麗 綺麗
Mac Chrome 綺麗 見出しや太字が細字になる 綺麗 綺麗※
Mac Firefox 綺麗 見出しや太字が細字になる 綺麗 綺麗※
iPhone 綺麗 綺麗 綺麗 綺麗
Windows Chrome 超かすれる、やばい まあまあ 綺麗 ブサ可愛い
Windows IE 綺麗 綺麗 綺麗 ブサ可愛い
その他 論外 Mac側が変化するのは納得いかない 綺麗だけど好みが分かれる
他有名サイトも結局メイリオ		 ※太字がかなり目立つ

游ゴシックに一括変換する手法

一括変換するとWindowsのChrome掠れ問題が起こります

閲覧数が少なければ無視していいんですが、一般的にWindowsのChomeユーザーは多いと思います。
自分の該当サイトをアナリティクスで見たら該当ブログは閲覧ユーザーの46%がWindowsのChromeを使用していました。
さすがに無視できないです。

font-weightを500にする手法

Mac側でh2やh3の見出し部分も細いフォントになります

/*Windows用にフォントweightを変える*/
*,
code {
font-weight: 500!important;
}

font-weight部分だけ子テーマで追記しました。
すると、Mac側ではh2やh3の見出し部分も細いフォントになってしまいブサイクになってしましました。
これでも満足できる人はいいかもしれません。

この際、boldなどのクラス指定でまたフォントを指定しなおしてみましたが、反映されませんでした。
Windows側では多少綺麗になります。

游ゴシック Mediumを使用して場合分けする手法

Windows側が若干細くて好みが分かれそうです

style.cssにfont-family全部記述します。
設定画面（クラス名の記入）はデフォルトに戻しておきます。

*,
code {
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif!important;
}

これをやったらMacでもWindowsでも理想通りの綺麗なフォントになりました。
Macではそのまま素直な游ゴシックです。
Windowsでは掠れることはなく綺麗な游ゴシックで見れています。
ただ若干細いです。
ここが好みの分かれるところだと思います。

Windowsはメイリオでいいかと妥協するパターン

もうWindowsではメイリオでよくない？

Windowsで見る游ゴシックもぶっちゃけ微妙なんですよね。
YouTubeもTwitterも他有名ブロガーもメイリオなんで、もうメイリオでよくないですか。
そういう場合はこの游ゴシック Mediumなどは消して下記のようにします。

間違えてCSSを書くとFontawesomeが表示されなくなるので注意

CSSに記述をするとFontawesomeが表示されなくなってしまうことがありました。
研究した結果、margin部分やimortantやクラス名codeなどきちんと揃えないといけないようです。

結論：Windowsはメイリオパターンを採用

比較検討した結果、windowsはメイリオパターンを採用します。
カスタマイズ欄でCSS追記して、設定画面でのフォント指定なしを選びます。

*,
code {
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"游ゴシック体", YuGothic, "メイリオ",meiryo,sans-serif;
    margin: 0px;
    padding: 0px;
}

これで設定画面ではなしを選択します。

  • フォントの種類＞全体＞なし
  • フォントの種類＞記事タイトル・見出し・ウィジェットボタンなど＞なし

これでWindowsは全部メイリオ、Macは全部游ゴシックを表示させます。
Macはヒラギノを優先させれば上手くいくようになったようです。
（2019/8/8 この間まで上手くいかなかったのに困惑してます、ここまでの作業なんだったの？？）

2019年8月のAFFINGERの先行アップデートでフォントの全体指定ができるようになりました。
そちらに従うと、またCSS追記なしでもヒラギノ優先できるようですが…
さすがに混乱してきますので、とりあえずしばらくはこれでいきます。

フォントは大事なので適当に変えられないですね。

これでAFFINGERでもすべてのブラウザ向けに納得できるフォント表示ができたと思います。
AFFINGERが気になった方は、ぜひこちらからどうぞ。
» AFFINGERを購入する

というわけで今回は以上です。

ブラウザの仕様が変わるせいなのか、主流フォントの移り変わりって激しいんですね。
またすぐにWebフォントの時代がやってきそうです。
AFFINGERテーマだとフォントも細かくカスタマイズできて便利だなと思いました。

関連記事AFFINGERでフォントサイズを変更する方法【本文見出し参照リンク】

-AFFINGER, WordPress