こんにちは、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です。