The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

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

投稿日:2019年1月14日 更新日:

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

僕はWordPressの有料テーマAFFINGERを3年以上使用しています。
フォントは大事だと思うので、細かくカスタマイズしています。

そんな僕が、WordPressでフォントを変更する方法を解説していきます。

作業環境

WordPress 4.9.8
AFFINGER 20181025

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

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

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

これらの基本情報をまず理解することができました。
特にこちらのサイト様を参考にさせていただきました。

游ゴシックのfont-family指定方法2018年度版!@font-faceは絶対NG!WindowsのChromeでかすれる問題徹底検証
https://wemo.tech/1155

次の2つの方法が紹介されています。

(1)font-weightを500にする方法
(2)游ゴシック Mediumを使用して場合分けする方法

実際にまずこれを試してみるのがオススメです。

ただ、AFFINGER5のテーマで試してみると、いくつか問題点がありました。
それを次の章で説明していきます。

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

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

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

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

WordPressでフォント変更する際に、他ブラウザやAFFINGER環境を考慮する方法

先ほどのサイト様の説明通りにfont-familyの編集をAFFINGERの環境で実践していきます。

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

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

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

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

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

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

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

ただ、*とcodeがそれぞれ何を指すのかは解明できていないです。
(他のテーマではbodyやhentryといったクラス名が多い気がします)
おそらく一括変換という意味ですかね。

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

先ほど説明したようにこのままだと「WindowsのGoogle Chromeで見ると游ゴシックが掠れる問題」が発生します。
ややこしすぎですね…

なので先ほどのサイト様の対策を試しました。

(1)font-weightを500にする方法

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

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

この際、boldなどのクラス指定でまたフォントを指定しなおしてみましたが、反映されませんでした。

Windows側では多少綺麗になりました。

(2)游ゴシック Mediumを使用して場合分けする方法

この場合は、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でも理想通りの綺麗なフォントになりました。
Windowsでは若干細いですが、掠れることはなく綺麗な游ゴシックで見れています。
Macではそのまま素直な游ゴシックです。

ただし…
この記述をすると、Fontawesomeが表示されなくなってしまいました。

これはなぜなんでしょうか。
現在、研究中です。

AFFINGERに新しく追加されていた「FontAwesomeIcons4.7.0の再読み込み(β)」を試しても改善されませんでした。

他ブラウザでの表示状況の整理

何もしないで全部を游ゴシックに指定 (1)font-weightを500にする方法 (2)游ゴシック Mediumを使用して場合分け
Mac Safari 綺麗 見出しや太字が細字になる 綺麗
Mac Chrome 綺麗 見出しや太字が細字になる 綺麗
Mac Firefox 綺麗 見出しや太字が細字になる 綺麗
iPhone 綺麗 綺麗 綺麗
Windows Chrome 超かすれる、やばい まあまあ 綺麗
Windows IE 綺麗 綺麗 綺麗
その他 Fontawesomeが表示されなくなった

まとめるとこんな感じです。

WindowsのChromeどうにかなんないですかね…

閲覧数が少なければ無視していいんですが、アナリティクスで見たら該当ブログは閲覧ユーザーの46%がWindowsのChromeを使用していました…
さすがに無視できないです。

なので、結局、現時点では本文の游ゴシック指定は解除しています。
それでもだいぶ綺麗になったと思います。

AFFINGERが気になった方は、ぜひこちらからどうぞ。
» AFFINGERを購入する

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

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

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

-AFFINGER, WordPress

Ad-336px-stinger8

Ad-336px-stinger8

Copyright© The Master of Swift App Coding , 2019 All Rights Reserved.