WordPressで、テーマのフォントが気に入らないときに別のフォントへ変更したいことがある。今回は、Googleフォントへ変更するために、必要な設定を紹介します。
Goolge Fontsからリンクを作成する
Goolge Fontsのサイトからリンクを生成する。赤枠で囲んだ+ボタンをクリックすると自分が使用したいフォントのリンクを生成できる。複数選択できるので、使用したいものすべてをクリックし、追加する。
+ボタンをクリックすると右下の黒背景のボックスに追加される。今回は3つのフォントを選択したので、3 Families seletcedと表示されている。
黒背景のボックスをクリックすると、以下の画像のようにCSSのリンクタグが表示されているので、それをコピーしておく。選択したフォントを使用するには、CSSのリンクタグをサイトに埋め込んだあと、font-familyをCSS内で指定すればOK。
WordPressのフォントの組み込み方
【外観】->【テーマエディター】をクリックする。
右側メニューの中で、「functions.php」をクリックする。
以下のように、「functions.php」内に追加する。一番下に記載すればOKです。
※https://fonts.googleapis.com/css?family=Gelasio|Public+Sans|Roboto&display=swapの部分は入れ替えてください。
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
function add_google_fonts() {
wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Gelasio|Public+Sans|Roboto&display=swap', false );
}あとは、使用したいフォントをCSSファイルに記載すればOK。【外観】->【カスタマイズ】をクリックする。
追加CSSをクリックするとCSSが編集できるので、そこにfont-familyを追加して、fontを変更する。
※ここではbodyとしてますが、なにに適用させるのかは環境に合わせて変更してください。
body {
font-family: sans-serif;
}右側のプレビュー画面で確認して、フォントに問題がなかったら、「公開」ボタンを押して、更新する。
※まだ本番環境に、公開したくない場合は、歯車⚙ボタンを押すと「下書きとして保存」ボタンが出てくるので、それをクリックして保存しておく。
