Ver1.3.2をリリースしました(1/27)

SANGOで使用するWebフォント(Google Fonts)を変える方法

SANGOでは、サイト内の一部の英文に「Google Fonts」のWebフォントを使用しています。使用しているのはQuicksandというフォント。丸みがあってかわいいのですよね。

初期設定では、英語だけWebフォントを使っているので(日本語のWebフォントは重いので・・・)、日本語フォントと混じると少し違和感を感じられるかもしれません。そこで、記事本文などにはWebフォントは適用していません。

使用するWebフォントを変える方法

ここでは、Webフォントを「Quicksand」から変える手順を紹介します。ここでは例としてGoogleFontsを使います。Google Fontsの使い方が分からない方は、下の記事を参考にしてみてください。

Google Fontsの使い方:初心者向けに解説!
Google Fontsの使い方:初心者向けに解説!

手順1:Webフォントの読み込みコードを用意

上の記事で紹介している手順で使用するフォントを選ぶと、読み込み用のHTMLコードが表示されますね。<link href="~"から始まるコードです。このコードのhref内のURLだけを後ほど使います。このときhttps:は含めなくてOKです。

注意
GoogleFontsでは通常の太さのものと、太字のもの両方を使用する設定にしましょう。

手順2:子テーマのfunctions.phpに変更用コードを貼付け

子テーマの導入方法は下の記事をどうぞ。

WordPressで子テーマを活用して安全にカスタマイズを行う方法

子テーマのfunctions.phpに以下のコードをまるっと貼り付けます。

functions.php
//Google fontsを変更
function register_googlefonts() {
     wp_deregister_style('sng-googlefonts');//初期設定を解除
     wp_register_style( 'sng-googlefonts', 'GoogleFontsのURL', array(), '', 'all' );
     wp_enqueue_script('sng-googlefonts');
}
add_action('wp_enqueue_scripts', 'register_googlefonts');
//END Google Fontsを変更

↑赤字の部分を使用するWebフォントのURLに置き換えます。例えば、「Montserrat」というフォントを使いたい場合は以下のようにします。

functions.php
//Google fontsを変更
function register_googlefonts() {
     wp_deregister_style('sng-googlefonts');//初期設定を解除
     wp_register_style( 'sng-googlefonts', '//fonts.googleapis.com/css?family=Montserrat:400,600', array(), '', 'all' );
     wp_enqueue_script('sng-googlefonts');
}
add_action('wp_enqueue_scripts', 'register_googlefonts');
//END Google Fontsを変更

繰り返しになりますが、URLにhttps:は含めず、//から始まる形にしましょう。

手順3:CSSを適用

最後にCSSでWebフォントを使うように指定します。子テーマのstyle.cssに以下のCSSを追加しましょう。

style.css
/*サイト全体のフォントを変える*/
body {
   font-family: 'Webフォント名',YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}

/*初期設定でQuicksandが使われている部分を変える*/
.dfont {
   font-family: 'Webフォント名',YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}

↑もし、サイト全体には適用せず、すでにQuicksand(初期設定のWebフォント)が使われている部分だけ変えたい場合には、body{~}の部分は除くようにすればOKです。


font-familyの書き方はこちらの記事が参考になるはずです。

font-familyの書き方まとめ:CSSでフォント種類を指定しよう
font-familyの書き方まとめ:CSSでフォント種類を指定しよう

5 Comments

ムラ

はじめまして!いつもお世話になってます。
詳細なコードを載せていただきありがとうございます^ ^

修正箇所を見つけたのでコメントさせていただきました!
二つ目の例のfunction.phpに書き込むコード
”//fonts.googleapis.com/css?family=Montserrat:400,600′, array(), ”, ‘all’ );
の部分の最初のコレ→”(2つ)ではなく’(1つ)にして貼り付けないとサイト真っ白になります!笑

それでは…ヽ(^ω^)ノ

返信する
サルワカくん

あ・・・!
完全にミスです。すみません!
ご指摘ありがとうございました。

返信する
yskb2

お世話になります。
GoogleFontsですが、フォントによっては使用できないものもあるのでしょうか?
いくつか試してみたのですが、問題なく反映されるものとそうでないものがありました(キャッシュは削除済み)。
また、複数のフォントを使い分けたい場合はwp_register_style〜をフォントの数だけ追記すればよいでしょうか?
最後に、サイトタイトルだけ別のフォントに変えたい場合はどのようにcssで指定するのがベストでしょうか?
色々と質問ばかりですみませんが、よろしくお願いします。

返信する
サルワカくん

フォントによっては使用できないものもあるのでしょうか?
⇒そんなことはないですね。おそらく何かの設定が間違っています。
(申し訳ありませんが、不具合ではないのでそのサポートは行っておりません)

複数のフォントを使い分けたい場合には、Google Fontsで使いたいフォントを全て追加して1つのURLを取得して貼り付ければ良いと思います。
Google Fontsの使い方を読んでくださいませ。
https://saruwakakun.com/html-css/basic/google-fonts

タイトルだけフォントを変えたい場合には、下記のようにCSSを指定すれば良いと思います。
.header #logo {
font-family: ◯◯;
}

返信する
yskb2

詳細のご説明ありがとうございます。
使用できないフォントは無いんですね。
教えていただいた方法で再度トライしてみます!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です