【Twenty Seventeenのちょこっとカスタマイズ】フォントに游ゴシックを加えよう【CSS】


こんにちは、mimiです。今日は初心に帰って?ほんとにちょこっとカスタマイズです。

WordPressのテーマ、Twenty Seventeenは各言語に対してそれぞれfont-familyを指定しています。が、残念ながらヒラギノ角ゴシック、メイリオだけの指定になっているので、みんな大好き「游ゴシック」を追加しましょう。
ソースはstyle.cssのこのへん。

/* Typography for Japanese Font */

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;
}

なので、外観 > カスタマイズ > 追加CSSを開いて、

 

html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

を追記したらOK。

2017-05-12追記

游ゴシック体にはWindowsとMacでウェイトの差があるそうなので、指定はこっちのほうが良さげ。

font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;

参照URL:CSSの游ゴシックで右往左往した話  | あっかぎのページ

表示を確認して良さげだったら、子テーマのCSSに移動しても良いでしょう。

プラス解説

font-familyの指定の下に、font-weightの指定もあるので、太字の感じも調整したければ数字を少し弄ると変わります。が、まあ個人的には700のままで良い気がします。

あとは、タイトルだけフォントを変えたければ、

html[lang="ja"] body .site-title {
	font-family: 'Pacifico', sans-serif;
}

とか指定すると良さげです。が、これだけだとPacificoが表示されないので、ヘッダーにgoogleフォントへのlinkタグを追加します。

add_actionを使いましょう。
子テーマのfunction.phpに

function add_webfontlink(){
    echo '<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">';
}
add_action('wp_head', 'add_webfontlink');

と追記すればOKです。


この記事を書いた人