Ver1.6 Released !

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でフォント種類を指定しよう

21 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

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

返信する
さと

こんにちは。sango 愛用させてもらっています。

フォントについて、このやり方でグーグルフォントが設定できたのですが、
タイトルと、太字にしたときに何故か明朝になってしまいます!
改善方法はありますか?

返信する
サルワカくん

ちょっと見てみないと原因がわからないですね・・・。
ウェブサイト欄にURLを載せていただければ確認できます。

返信する
さと

ありがとうございます。
ちなみに、スマホで見たら明朝、PCから見たらゴシックになってしまいます…
全部、本文と同じフォントを使用したいと思っています(>_<)
ご確認お願い致します。

返信する
サルワカくん

確認しましたがSANGOの問題ではなく、CSSの指定の仕方に問題があります。
例えば

strong, b {
    font-family: "G2サンセリフ-B";
}

とか

h1, h2, h3, .entry-title {
    font-family: "新ゴ シャドウ";
}

とかですね。
これらはどのような意図でこれは書いているのでしょうか。
これらのフォントが使えるような状態になっていないので、その部分にブラウザごとのフォントが使われるようになっています。

返信する
さと

サルワカ様
ご返信ありがとうございます!
「そんなCSS入れた覚えないのになぁ…」と思い色々調べたところ、「TypeSquare Webfonts Plugin」を導入していたのが原因でした。

こちらのサイトの「フォントの変更方法」を見つける前に、フォントを変えたいがために導入していたようです。
そこで、太字や見出しのフォントがほかのフォントに設定されていたみたいです。

おかげ様でなおりました。ありがとうございました!

サルワカくん

そういうことだったのですね!
ご報告ありがとうございました。

ゆーちゃん

はじめまして。
sangoを愛用させて頂いております。

sangoで一部に使われている「Quicksand」というwebフォントの読み込みを遅延させてサイトを高速化するためにはどうしたらいいのでしょうか?

いろいろ試したのですが、パソコンにあまり詳しくないこともあり教えて頂けたらと思います。

よろしくお願い致します。

返信する
サルワカくん

Autoptimizeというプラグインを使用して設定の「追加」で「webfont.js で非同期にフォントを結合して読み込む」にチェックを入れると良いかと思います。

返信する
れおん

お世話になっております。
functions.phpの記述についての質問です。

子テーマにあるfunctions.phpに追記することで、Google Fontsを無効にする方法はありますか?(Google Fonts関連のコンポーネントをヘッダーに読み込まない方法)

TypeSquare Webfontsを使うことになったためGoogle Fontsを使わなくなりました。
そこで、親テーマの「library->functions->sng-style-scripts.php」のGoogle Fontsに関する記述をコメントアウトすることで無効にすることができました。

しかし、アップデートのことを考えると親テーマを直接編集するのはまずいため、子テーマのfunctions.phpにアクションフックを用いて無効にする方法を試みたのですが、自己解決できなかったため、質問させていただきました。

どうか、よろしくお願いしますm(_ _”m)

返信する
れおん

とても素早い対応ありがとうございます!
おかげで理想通りの処理が実現できました。
これからもSANGOを愛用させていただきますm(_ _”m)

返信する
まりまり

はじめまして。いままで海外のテーマ使ってましたが、さるわかの見やすさに惹かれてSANGOを購入しました。

さっそく導入して、フォントを変えてみようとphpを開いたらびっくり。すっきり見やすいのはテーマだけでなくて、スタイルシートやphpファイルなどの見えないところもでした!

いままでコードを探して「これかな?あれかな?」って書き換えるのにすごく苦労していたので、とても嬉しいです。(そもそも書き換える必要もないのです)涙

返信する
サルワカくん

そう言って頂けると本当に嬉しいです。
時間をかけて作った甲斐がありました。
わざわざコメントいただき、ありがとうございました。

返信する
田中建蔵

初めまして、SANGOを使わせていただいているものです。

タイトル部分のフォントを名朝に変えたいのですが、変え方がわからないため教えて頂きたいです。

やったことは、テーマの編集>SANGO>スタイルシート(style.css)に以下のコードを追記しました。
.h1 .dfont #logo{
font-family: ‘ヒラギノ明朝 ProN’,’Hiragino Mincho ProN’,sans-serif;
}

また同じ場所で
.header #logo {
font-family: ‘ヒラギノ明朝 ProN’,’Hiragino Mincho ProN’,sans-serif;
}
も試してみましたが変化しませんでした。

そもそも初心者なので、コードが間違っているなどもあると思います。

お手数おかけしますが、よろしくお願い申し上げます。

返信する
サルワカくん

僕のMacで見てみると適用されています。
ヒラギノ明朝はWindows PCには入っていないフォントですが、Windowsをお使いではないですか?
参考:Font-familyメーカー

返信する

コメントを残す

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