Photosynthesic blog

夫婦でやってるWeb屋です。

2017-01-27

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

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

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

<br />
/* Typography for Japanese Font */</p>
<p>html[lang=&quot;ja&quot;] body,<br />
html[lang=&quot;ja&quot;] button,<br />
html[lang=&quot;ja&quot;] input,<br />
html[lang=&quot;ja&quot;] select,<br />
html[lang=&quot;ja&quot;] textarea {<br />
	font-family: &quot;Hiragino Kaku Gothic Pro&quot;, Meiryo, sans-serif;<br />
}<br />

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

 

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

を追記したら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のままで良い気がします。

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

<br />
html[lang=&quot;ja&quot;] body .site-title {<br />
	font-family: 'Pacifico', sans-serif;<br />
}<br />

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

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

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

と追記すればOKです。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter