こんにちは。SaitoKouです。
今回はWordPress無料テーマ「Neve」のフォント変更について書いていきます。
Neveの機能
Neveでは、サイト全体のフォントを一括で変えられるような機能があらかじめついています。カスタマイズ画面に移動して、「タイポグラフィ」を選択しましょう。
すると、フォントを変更する箇所を選択できます。今回はわかりやすく「見出し」を選びます。
選ぶと、下の図のようにフォントを選択するボックスが出ます。「Font-Family」と書いてあるところですね。
このフォントファミリーが多数用意されています。この機能で簡単にフォントの変更ができるということですね。
けど問題点が・・・
Neveがそもそも日本産のテーマでないために、このFont-Family内に日本語のフォントがありません。ですので、どの設定にしたとしても、大体PCデフォルトのフォントとなってしまいます。
Font Familyに、使用できるフォントを追加する。
ということで、このドロップダウンリストに日本語フォントファミリーを追加してやります。僕自身は游ゴシックが好きなので、游ゴシックが使えるようにします。
テーマファイルをこのように編集しましょう。
wp-content\themes\neve\globals\utilities.php 271行目付近
/**
* Get standard fonts
*
* @param bool $with_variants should fetch variants.
*
* @return array
*/
function neve_get_standard_fonts( $with_variants = false ) {
$fonts = array(
'Arial, Helvetica, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'Arial Black, Gadget, sans-serif' => array( '900', '900italic' ),
'Bookman Old Style, serif' => array( '400', '700', '400italic', '700italic' ),
'Comic Sans MS, cursive' => array( '400', '700', '400italic', '700italic' ),
'Courier, monospace' => array( '400', '700', '400italic', '700italic' ),
'Georgia, serif' => array( '400', '700', '400italic', '700italic' ),
'Garamond, serif' => array( '400', '700', '400italic', '700italic' ),
'Impact, Charcoal, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'Lucida Console, Monaco, monospace' => array( '400', '700', '400italic', '700italic' ),
'Lucida Sans Unicode, Lucida Grande, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'MS Sans Serif, Geneva, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'MS Serif, New York, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'Palatino Linotype, Book Antiqua, Palatino, serif' => array( '400', '700', '400italic', '700italic' ),
'Tahoma, Geneva, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'Times New Roman, Times, serif' => array( '400', '700', '400italic', '700italic' ),
'Trebuchet MS, Helvetica, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'Verdana, Geneva, sans-serif' => array( '400', '700', '400italic', '700italic' ),
'Paratina Linotype' => array( '400', '700', '400italic', '700italic' ),
'Trebuchet MS' => array( '400', '700', '400italic', '700italic' ),
/* ここに追加 ↓↓ */
'Yu Gothic Medium, 游ゴシック Medium, YuGothic, 游ゴシック体, ヒラギノ角ゴ Pro W3, メイリオ, sans-serif' => array( '400', '700', '400italic', '700italic' ),
/* ここに追加 ↑↑ */
);
これでOKです。ドロップダウンリストにも出るようになります。
ちゃんと反映もされます。
まとめ
直接追加CSSで変更してもいいのですが、こちらの方法のほうが余計なことを考えずに簡単にフォントを変更できると思います！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
