ワードプレスのテーマ「Cocoon」では多くのウェブフォントが試用可能ですが、グーグルフォントの「Noto Sans JP」に関しては初期の状態では使用できません。
現代のウェブサイトにおけるスタンダードなウェブフォントなので利用したいですよね。こんなにも美しいフォントは他に中々ありません。
今回の方法は親テーマをいじらない方法です。
たった数行のコードを記述するだけで「Noto Sans JP」が使えるようになります。コピぺするだけで簡単なのでぜひチャレンジしてみてください。
今回触るファイルの種類
触るファイルは以下の2つです。
- functions.php
- style.css
必ず子テーマを利用し親テーマは触らないようにしましょう。バージョンアップの度にコードが消えてしまうことがありますので注意しましょう。
いじる場所は以下の通りです。
「ダッシュボード」＞「外観」＞「テーマエディター」から編集したいファイルを選択してください。
functions.phpをいじる場合は気を付けましょう。記述間違いをすることでサイトが真っ白になる場合がございます。FTPからファイルをいじれる状態で行ってください。
functions.phpに下記コードを追加する
何度も言いますがバックアップをとり編集をしてください。
下記のコードを子テーマのfunctions.phpに記述してください。
どういうコードかというと「”Noto Sans JPを読み込むためのコード”を出力する」コードです。
function add_wp_notoSansJp() {
echo '';
}
add_action('wp_head', 'add_wp_notoSansJp');
コピペして記述することが出来ましたら保存して1つ目の作業完了です。
ここでサイトが真っ白になるのであれば、何か間違った記述をしているかもしません。もしサイトが真っ白になった場合、バックアップしておいた元のファイルを上書きしましょう。
サイトが真っ白になる可能性も踏まえてきちんとバックアップを取っておきましょう。
もしダメそうなら下記のコードを記述してください。
自分はこちらのコードを記述しましたが不具合でしょうか、一度phpタグを閉じてから書き始めるときちんと反映されました。
?>
<?php
function add_wp_notoSansJp() {
echo '';
}
add_action('wp_head', 'add_wp_notoSansJp');
style.cssに下記コードを記述する
子テーマのstyle.cssに下記コードを記述します。
body{
font-family: 'Noto Sans JP', sans-serif;
}
サイトの文字全てにNoto Sans JPの書体を反映させます。
最後に「保存」を押して完了です。
まとめ
いかがだったでしょうか。コピペするだけでこんなにも簡単にCocoonで「Noto Sans JP」を使用することが出来ます。
Cocoonはとても優れているテーマですがなぜかこのフォントだけは入っていません笑なんで？
フォントはサイトの雰囲気を大きく左右します。この機会にサイト全体をモダンでスタイリッシュに変えてみてはいかがでしょうか。