【THE THOR】デフォルトで設定されている Google Fonts を変更する方法

2018.12.23
2019.02.19
カスタマイズ

カスタマイズ

THE THOR ではデフオルトで2種類の Googleフォント（英字）が設定されています。
これを好きなフォントに変更する方法を紹介します。

1 設定されているフォント
2 テーマファイルのカスタマイズ
3 CSS でフォント指定を上書きする
- 3.1 親テーマで「Fjalla One」が指定されている部分
- 3.2 親テーマで「Lato」が指定されている部分
4 反映されない場合

設定されているフォント

THE THOR に設定されているフォントは「Fjalla One」と「Lato」の2種類。
「Fjalla One」の方は主にトップページのセクションのタイトルなどに使われており、「Lato」はそれ以外のサイト全体に適用されています。

テーマファイルのカスタマイズ

用意するもの

FTP ソフトとテキストエディタ
サーバーのファイルマネージャー（とテキストエディタ）

のどちらかを使用します。

「wp_head.php」をダウンロード

まず最初に、FTP ソフトかサーバーのファイルマネージャーを使用して

wp-content ＞ themes ＞ the-thor ＞ inc ＞ parts

と進み、その中の「wp_head.php」というファイルをダウンロードしてください。

このファイルを開くと、42～54行目（THE THOR ver.1.3.0）に Googleフォントを読み込んでいる部分があるので、ここを変更していきます。

wp_head.php

//Googleフォント用CSS
if ( get_option('fit_seoCss_lato')) {
	echo '<link class="css-async" rel href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900">'."\n";
}else{
	echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900">'."\n";
}

//Googleフォント用CSS
if ( get_option('fit_seoCss_fjalla')) {
	echo '<link class="css-async" rel href="https://fonts.googleapis.com/css?family=Fjalla+One">'."\n";
}else{
	echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One">'."\n";
 }

好きなフォントを選んで差し替える

Google Fonts から好きなフォントを選んで、フォント名の部分を差し替えていきます。

好きなフォントを選び、右上の「＋」アイコンをクリックします。

画面右下に出てくる黒い帯の「ー」アイコンをクリックすると、選んだフォントを呼び出す CSS ファイルの URL とフォント名が表示されているポップアップが出てきます。

CSS の URL 部分をコピーして、先ほどダウンロードした「wp_head.php」の Googleフォントを読み込んでいる部分と差し替えます。

子テーマに対応するフォルダを作りアップロードする

次に、子テーマ直下に「inc」という名前のフォルダを作り、更にその中に「parts」というフォルダを作ってください。そこに編集した「wp_head.php」をアップロードします。

wp-content ＞ themes ＞ the-thor-child ＞ inc ＞ parts ＞ wp_head.php

CSS でフォント指定を上書きする

子テーマの「style-user.css」に以下を追記して、親テーマでフォントを指定している部分を上書きします。

フォント名は画像の赤枠の部分になります。

親テーマで「Fjalla One」が指定されている部分

「フォント名①」には「Fjalla One」と置き換えるフォントの名前、「フォント②」には「Lato」もしくは「Lato」と置き換えるフォントの名前を入れてください。

style-user.css

.eyecatch__link::after, .heading-main, .siteTitle{
	font-family: "フォント名①",
	"フォント名②",
	"游ゴシック体",
	"Yu Gothic",
	"YuGothic",
	"ヒラギノ角ゴシック Pro",
	"Hiragino Kaku Gothic Pro",
	"メイリオ",
	"Meiryo",
	"ＭＳ Ｐゴシック",
	"MS PGothic",
	"sans-serif";
}
.pager__item, .page-numbers, .searchBtn__close, .menuBtn__close, .pickup3__item:before, .pagePager__item, .controllerFooter__close, .t-headerCenter .searchBtn__link::after, .t-headerCenter .menuBtn__link::after{
	font-family:"フォント名①";
 }

親テーマで「Lato」が指定されている部分

「フォント名②」と書いてある所に、「Lato」と置き換えるフォントのフォント名を入れてください。