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

19 COMMENTS

田中建蔵 2018/09/02

初めまして、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;
}

も試してみましたが変化しませんでした。

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

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

回答を見る
まりまり 2018/08/27

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

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

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

回答を見る
れおん 2018/07/09

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

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

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

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

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

回答を見る
ゆーちゃん 2018/04/26

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

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

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

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

回答を見る
さと 2018/04/10

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

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

回答を見る
yskb2 2017/11/26

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

回答を見る

コメントを残す

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