【SANGO】デフォルトで指定されているGoogle Fontsを変更・無効にする方法

SANGO では、デフォルトで Quicksand という Google Fonts が使用されています。
SANGO の CSS や JS は関数ファイルで制御されているため、Web フォントを使用したくない場合やフォントを変更したい場合は、該当部分を直接書き換えるか、function.php で置き換えや制御を行う必要があります。

1 SANGO 本体の該当部分を編集する方法
2 子テーマの function.php に追記する方法
- 2.1 フォントを変更したい場合
- 2.2 Google Fonts を無効にしたい場合

SANGO 本体の該当部分を編集する方法

「WordPress 管理画面＞外観＞テーマの編集」より、右上の「編集するテーマを選択」で「SANGO」を選びます。
「library ＞ functions ＞ sng-style-scripts.php」と進み、23行目あたりにある

sng-style-scripts.php

// GoogleFonts：フォントを変えたいときは以下のURLを置き換えてください。
wp_register_style( 'sng-googlefonts', '//fonts.googleapis.com/css?family=Quicksand', array(), '', 'all' );

という部分を変更していきます。

Google Fonts を無効にしたい場合はこの2行をコメントアウトか削除、フォントを変更したい場合は「//fonts.googleapis.com/css?family=Quicksand」という部分を好きなフォントのものに変更します。

注意

子テーマではなく SANGO 本体のファイルを編集するので、バックアップを取ってから作業してください。また、テーマがアップデートされた際、再び変更が必要になることがありますのでご注意ください。

子テーマの function.php に追記する方法

フォントを変更したい場合

SANGO のカスタマイズガイドで開発者様が紹介していた方法です。
子テーマの function.php に以下のように記述します。

function.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を変更

次に、子テーマの style.css で表示されるフォントを指定します。
元々 Quicksands が指定されていた部分だけを変更したい場合（本文には適用しない場合）は、色付きの部分だけを記述すればOKです。

style.css

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

参考 SANGOで使用するWebフォント（Google Fonts）を変える方法サルワカ

Google Fonts を無効にしたい場合

こちらも SANGO のカスタマイズガイドで開発者様が紹介していた方法です。
子テーマの function.php に以下を記述してください。

function.php

//Google fontsを解除
function deregister_googlefonts() {
     wp_deregister_style('sng-googlefonts');//初期設定を解除
}
add_action('wp_enqueue_scripts', 'deregister_googlefonts', 9999);
//END Google Fontsを解除

当サイトの「【WordPress】レンダリングをブロックするJavascriptやCSSの読み込みを遅らせる①」という記事で紹介している「<head> 内の CSS をフッターに移動させる」カスタマイズを行っている場合は、前半部分に下記のように書き足しても大丈夫です。

function.php

// ヘッダーのCSSをキャンセルする
function dequeue_header_css() {
  wp_dequeue_style('sng-fontawesome');
  wp_dequeue_style('contact-form-7');
  wp_dequeue_style('wordpress-popular-posts-css');
  wp_dequeue_style('sng-googlefonts');
}
add_action('wp_enqueue_scripts', 'dequeue_header_css', 9999);

//フッターで読み込む
function enqueue_footer_css(){
  wp_enqueue_style('sng-fontawesome');
  wp_enqueue_style('contact-form-7');
  wp_enqueue_style('wordpress-popular-posts-css');
　/*こっちには書き足さないでください*/
}
add_action('wp_footer', 'enqueue_footer_css');