【wordpress】フォントにCSSがあたらない?【font-family】

font-familyのCSS

基本は以前フォント変更フォントスタイルにまとめた通りやbodyに指定のコードを入れるとフォントの指定ができます。
今回はフォントファミリーやフォントスタイルの変更をした際にうまくいかない場合、どんな原因があるか調べてみました。

font-familyでフォントの指定が出来ない?

フォントに限らずですがCSSをしっかり指定したのにうまく効かずに変更が適用されない、と言ったことはみなさんもあると思います。
フォントファミリーの基本の指定の形は
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','MS ゴシック',sans-serif;

こんなふうに使いたいフォント+代用するフォントで指定をします。
まずはコンマやシングルクオーテーションなど、区切りがきちんとできているかの確認をしましょう。
色々試して、結局単純なミスだった!ということはよくあります!


またフォントの指定以外の場合でも確認すべき点は
・キャッシュが残っているせいではないか
・chromeの検証などでCSSが適用されている状態か確認
・確認した際に他のCSSが優先されていないか(打消し線で打ち消されている等)
などがあります。思った形にならなかった時は一度見てみましょう。

そしてやはりfont-familyの注意点はOS・ブラウザによって見え方が変わってくるところです。
Windowsで指定していたフォントがMacなどのsafariでは違うフォントに…など、搭載されているフォントが違ったり、文字の太さの種類が違って片方は太すぎたり細すぎたりとなかなか揃わないこともあります。
また「Hiragino Kaku Gothic ProN」「ヒラギノ角ゴ ProN W3」と上のコードでも同じフォントで表記違いを書いておくなどしないと思っているフォントが当たらない場合があるようです。
アップデートなどでフォントの表記が変わっていないかなども確認しましょう。

あとはよく見られそうなブラウザでどう見えるか自分でも確認しておくことが大事です。
ユーザーの環境によっては変えられない部分も出てくると思うので完全に回避することは出来ない問題もあるかと思いますが、フォントの指定を複数にしておく、太さの指定をどれから見ても差が少ない数字を指定するなど、出来るだけ大きな違いが出ないように工夫は出来ると思います!

まとめ

今回はフォントの指定をしても適用されなかった!という場合の見直す点についてまとめてみました。
単純なミスで効いていなかった、ということも意外と多いと思いますのでまずはしっかり見直してみましょう。
フォントが変わってしまうと意図しない見栄えになってしまうこともありますので、注意しましょう。

ワードプレスでよく起こるフォント関連の問題に関してはコチラもご参考に!

【WordPress使い方】PCとスマホでフォントが変わってしまう?【疑問】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です