WordPressで
ウェブサイト全体のフォントを変更する方法

以前この記事で、ちらっと

テーマの標準のフォント変更設定では、日本語のフォントを選択できなかったので、Easy Google Fontsというプラグインを導入して、無理やり変えました。笑

的なことを書いていたのですが、その時の結果がこちらです。

ヘッダー上にある「サイトのタイトル」と「キャッチフレーズ」については、Easy Google Fonts使ってもをフォントが変えられなかったです。キャッチフレーズの方は、そもそも色すら変えられてないですよね。
多分この辺は、CSSを直接編集するしかないんじゃないかと思っています。

ということをその時にも書いていたのですが、このフォント問題がずっと気になっておりまして…。

それを改善するためにかなり苦戦したので一応まとめておきます。

Easy Google Fontsを上手く使う方法はないかなとか、どこをいじれば全部変わってくれるのかとか…。

CSS(というかそもそものサイト構造)をあまり理解していない僕にはかなり大変な作業になりました。

結局当時の僕の予想通り、解決策としてはCSSをいじりました。笑

僕はCSSの知識が全然ないですが、何とかなりました。

 

フォントの準備

まず始めにウェブサイトで使用したいフォントを探します。

僕の場合は、自分が絶大な信頼を置いているGoogleさんのフォントを使わせてもらいました。笑

ちなみにNoto Serif JPという日本語用フォントで、ここではBlack 900という太さを使用します。

【追記】後で分かったことなのですが、「Semi-bold 600」以降の大きさは太字用のフォントである場合が多いみたいなので、ここで選択するのは「Midium 500」くらいがイイかもです。

上の画像の右側のはなんやねんと思うかもしれませんが、この文字列を使うことでフォントを変更できるのです。

 

header.phpに入力

先ほどの画像の

上の赤丸の部分を丸ごとコピーして、

 

サイトサーバー内の「…/wp-content/themes」の中にあるテーマファイルのheader.phpを開き、
（僕の場合は「/themes/cats456」の中のheader.phpですね。）

 

上の画像の赤線のように「<head>」と「</head>」の間に挿入します。
（多分その間ならどこでもいいと思われです。）

この作業で、このウェブサイトがこのフォントを使用できるようになりました。
しかし、まだ使用しているわけではありません。

 

WordPress内でテーマの追加CSSを編集

最後に、
先ほどの画像の

上の赤丸の部分を丸ごとコピーして、

 

WordPressで自分のサイトにログインして、上の画像のように外観のカスタマイズで、左バーの一番下にある「追加CSS」というのを押します。

そこで下の画像のようにコードを挿入するのですが…。

ここで、どのような要素を指定してコピーしたコードを挿入すればいいかはウェブサイトによって変わってくるかもしれません。

少なくとも、上の画像内上部の

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a {
	font-family: 'Noto Serif JP', serif;
}

というコードと同じような要素(html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, aなど)をfont-familyでフォントを指定してあげると、サイトのほとんどがそのフォントに変わってくれると思います。

 

フォントが変わらない場所がある場合

僕のウェブサイトでは、上部のコードでフォントを指定しても、ウェブサイトタイトルの「極夜の燈火」という部分のフォントが変化しませんでした。

そこで僕はGoogle Chromeのデベロッパーツールを使用し、ウェブサイトタイトルが青く光るように元を辿り、何の要素がフォントを上書きしているのかを調べました。

上の画像がその結果です。

実際の作業としては、
ウェブサイトタイトルを辿った結果見つけた文字列の行をクリックし、下の「Styles」のタブから、取り消し線が引かれていない「font-family」を見つけるのです。

僕の場合は、

.site .site-title h1, .site-title a {
    font-family: 'Josefin Slab', sans-serif;
}

でしたね。

ここで見つけた「.site」や「.site-title」や 「.site-title」の「h1」や「a」を上手く組み合わせて、

僕が実際に記述したような

.site a {
	font-family: 'Noto Serif JP', serif;
}

というコードを先ほどの追加CSSに記述します。

はっきり言うと「.site a」ではなく、そのまま「.site .site-title h1, .site-title a」をコピぺしても良いです。

しかし要素を細かく指定してしまうより、幅広く指定する方が何となくイイ気がしたので今回はこのように簡潔にしました。
（あと、普通にコードは短い方が美しいですよね。笑）

追記

上記の方法でも追加CSSの修正が適応しない場合は、以下のように修正します。

.site a {
	font-family: 'Noto Serif JP', serif !important;
}

このように行末に「!important」を加えることで、他のCSSの設定などを無視して、最上位権限？のような形でスタイル（フォント）を適応することができます。

しかしこの「!important」は、あまり乱用しすぎるとCSSの管理が複雑になったりするみたいなので、できる限り使わない方がいいようです。

とか言いながら、僕は結果的に以下のようにフォントを設定することにしました。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a {
	font-family: 'Noto Serif JP', serif !important;
}

全ての要素に「!important」しました。笑

少なくともこのサイトでは、このフォント以外のフォントを使用することが恐らく無いはずなので、特に問題はないかと思われます。

 

まとめ

今回の流れをまとめると、

  1. ウェブサイトで使用したいフォントを探す
  2. header.phpの編集
  3. WordPressにログインし、外観のカスタマイズで追加CSSを編集
  4. もし3でフォントが変わらない文字を見つけたら、その文字をディベロッパーツールで調べ、上書きされている要素を追加CSSでさらに上書きし直す。

という感じになります。

CSSなどがあまり詳しくない僕でも何とかなりましたというお話でした。笑

 

今回はここまでです。

それでは～。(*ˊᗜˋ*)ﾉ⁾⁾

 

 

はっきり言うと「.site a」ではなく、そのまま「.site .site-title h1, .site-title a」をコピぺしても良いです。

しかし要素を細かく指定してしまうより、幅広く指定する方が何となくイイ気がしたので今回はこのように簡潔にしました。
（あと、普通にコードは短い方が美しいですよね。笑）

追記

上記の方法でも追加CSSの修正が適応しない場合は、以下のように修正します。

.site a {
	font-family: 'Noto Serif JP', serif !important;
}

このように行末に「!important」を加えることで、他のCSSの設定などを無視して、最上位権限？のような形でスタイル（フォント）を適応することができます。

しかしこの「!important」は、あまり乱用しすぎるとCSSの管理が複雑になったりするみたいなので、できる限り使わない方がいいようです。

とか言いながら、僕は結果的に以下のようにフォントを設定することにしました。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a {
	font-family: 'Noto Serif JP', serif !important;
}

全ての要素に「!important」しました。笑

少なくともこのサイトでは、このフォント以外のフォントを使用することが恐らく無いはずなので、特に問題はないかと思われます。

 

まとめ

今回の流れをまとめると、

  1. ウェブサイトで使用したいフォントを探す
  2. header.phpの編集
  3. WordPressにログインし、外観のカスタマイズで追加CSSを編集
  4. もし3でフォントが変わらない文字を見つけたら、その文字をディベロッパーツールで調べ、上書きされている要素を追加CSSでさらに上書きし直す。

という感じになります。

CSSなどがあまり詳しくない僕でも何とかなりましたというお話でした。笑

 

今回はここまでです。

それでは～。(*ˊᗜˋ*)ﾉ⁾⁾

 

 

関連ページ

Default Thumbnailcats456 Default ThumbnailGoogleクローラーに認知されたか確認する方法 Default Thumbnail Default Thumbnail

One thought on “WordPressで
ウェブサイト全体のフォントを変更する方法”

  1. こんばんは。
    ＜Easy Google Fonts＞を使いフォントのアレンジに挑戦していたのですが、どうしても反映しない部分がありCSSをいじらなければいけないのだな、、、と思いながらその勇気がなく、躊躇していました。
    まだ少し怖いですが、水無富らいさんの説明が大きなヒントになりそうです。
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, ,,,,, tfoot, thead, tr, th, td, a
    の各要素がどこを表示しているかがわかれば一律ではなくより細かく分けてフォントを設定することも可能なのかもと考えています。
    大変参考になりました。ありがとうございました。

コメントを残す