WordPressのテーマTwenty Seventeenについて、サイトのフォントを変更したいなーと思い、Google先生を頼って紹介されていた方法などを試してみたのですが、一向にフォントが変わりません。
一部分のフォントが変わったとしても、記事のタイトルのフォントだけ変化がなかったり・・・。
「え…私だけ特殊なの??(*_*;」
なんて考えたりしましたが、ようやくフォントを強制的に変更することができましたので、その方法を書いてみたいと思います。
変更するファイル
コードを記入していくファイルは、style.cssです。事前に子テーマのstyle.cssを用意しておきましょう。
子テーマstyle.cssの格納場所:public_html/wp-content/themes/子テーマ
多くのサイトではこう書かれていた
私が目にしたサイトでは、style.cssにある以下のコードの「font-family: “Hiragino Kaku Gothic Pro”, Meiryo, sans-serif;」の部分を好みのフォントに変更すると良いと書かれていました。
1 2 3 4 5 6 7 |
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea { font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; } |
早速試してみたんですけど、記事のタイトルのフォントが変わらなかったんです。
その後も1時間から2時間くらいコードとにらめっこしながら色々といじくってみたんですが、ダメでした・・・。
サイトのあらゆるフォントを強制的に変える方法
そこで、以下のコードをstyle.cssに追記したところ、上手くいきました!
1 2 3 4 |
html, body ,a, abbr, acronym, address, apple, big, blockquotet, caption, cite, code, dl, dt, dd, del, dfn, div, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, iframe, ins, kbd, label, legend, span, object, ol, ul, li, p, pre, q, s, samp, small, strike, strong, sub, sup, table, tbody, tfoot, thead, tr, th, td, tt, var { font-family: "YuGothic", "Yu Gothic","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif!important; } |
とにかく、サイトのあらゆる文字のフォントを変更しています。
ポイントは、コード中の「!important」です。
これがないと、一部のフォントが変化してくれなかったので、「font-family」の最後に付けて、強制的に変更するようにしています。
無理矢理な感じもしますが、目的を達成したので良しとします。
上記のコードを使えば、フォントが游ゴシック、ヒラギノ、メイリオの順に優先的に表示されるようになります。
もし、パソコンにどのフォントも入っていない場合には、ゴシック体系の文字で表示されます。
私と同じように悩まれている方がいたら試してみてください。