ブログを読んでいて読みやすいなと思う記事と読みにくいなって思う記事があると思うのですが、文字の大きさとフォントですよね。
それで、僕も自分のこのあまり更新していないブログでも気になっていたのですが、そのままにしてきました。
ですが、あまりにきになったので、重い腰を上げフォントを変えました。
って、随分大げさの事のようですが、ワードプレスの追加CSSに数文字足しただけです。
ですが、しったかの僕はその後しばらくして、PCとスマホで文字が違う事に気づきました。
せっかく良かれと思ってやったのに、余計に読みづらくしてしまっていたのです。
ばかだな。しったか。
もし、僕のように初心者の人でワードプレスのフォントを変更したいなとか、変更したらスマホと文字が変わったなって方は参考にしてみてください。
ここでわかる事
ワードプレスで作ったブログのフォントを調べ方
別にワードプレスでなくてもweb上テキストであれば、だいたいわかります。
それは、Chrome拡張機能に「WhatFont」を入れるだけです。
what fontを使えるようにする
まずはここから、Chromeの拡張機能に追加します。
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
追加されると、Chromeのブラウザ右上にこのようにでます。
あとはブラウザ右上の「WhatFont」をクリックして、調べたいテキストの上にカーソルを持っていくとそのテキストのフォントが何かわかります。
実際に使っているフォントを調べる
僕は、メールやTextEditerを使う時はメイリオを使う事が多いのですが、ワードプレスで作ったブログはテンプレートに指定された文字をそのまま使っています。
特に、可もなく不可もなくって感じだったのですが、この記事の冒頭にも書いたように、気になりだしたら変えたくなったのです。
そこで、まず今何を使っているのかをまず調べました。
（見ただけでは私レベルでは、何を使っているのか分かりません。）
WhatFontで調べてみるとゴシックのようです。
明朝体でないのは解っていましたが、ごく普通にゴシックです。
画像のブログと今のブログのフォントを比べても違いが分かりますね。
ブログのフォントを変更
/*font*/
body {
font-family: “メイリオ”;
}
を追加してWhat Fontで確認すると、おお、変わっています。ブログのフォントがゴシックからメイリオになりました。
ここまでは、よかったのですが、、、、、
数週間後、あれ？
ブログをスマホでみたらフォントが明朝体？
いつもPCで、Chromeのデペロッパー（F12）Mac(⌘+option+i)で解像度を見てスマホの解像度での表示を確認するのですが、そこでは、OSに文字が依存されているので、設定したメイリオで表示されます。
なので、表示されているFontはメイリオだと思い込んでいました。
ですが、スマホでは明朝？？？
原因は追加CSS
確かに、追加CSSでメイリオを追加しました。
確認すると、メイリオが使われています。
でも、良く見てあほな頭で考えました。
代替えのフォントを入れてありません。
WhatFontでみると、Familyのところがメイリオのみです。
ここは、web上に表示したい文字を設定しておくところなのですが、使っている端末に設定した文字があるかわかりません。もしない場合でも表示できるように、メイリオが無かったら、これで出してねって代替え案を書いておかないと、閲覧している機種のデフォルトで表示されます。
デフォルトは日本の場合は明朝体かゴシック体が多いです。ちなみにsans-serif＝ゴシック体、serif ＝明朝体です。
これで、自分のブログをスマホで見ると明朝体で表示される原因が解りました。
追加CSSでFontFamilyにフォント追加
原因がわかったので追加CSSのFontFamilyに追加して確認します。
しっかり代替え案が載っています。
スマホで確認すると、こちらも明朝ではなくゴシックで表示されています。
僕の使っているスマホではメイリオは無いけど、ゴシックであればあったらしくて、ゴシックで表示されています。
なので、他の人のスマホではゴシックが無ければ他のFontで表示されているはずです。
ポイント代替え案をFontFamilyに追加する場合は、左から使える順に表示されていくので、メイリオが無ければゴシック体で表示したい場合は、メイリオの次にゴシック体を追加します。
これで、無事にスマホでも明朝体以外で表示されました。
別に、明朝体が嫌いなわけではないです。
自分が読むときに、メイリオかゴシックが読みやすいので、他の人もそうかもしれないと勝手に思っているだけです。
まとめ
気にしても、誰がどのような端末で見るかわからないから、見られればいいやという方は、デフォルトのまま触らない方がいいです。
でも、「What Font」はいいでしょ？
ネットであちこち見てて気になるフォントがすぐわかるって凄いなって思いました。
以上、ワードプレスで作ったブログを見るとパソコンとスマホでフォントが違うでした。
