MENU
無料相談・お問い合わせ
無料相談・お問い合わせ

【SWELL】Googleフォントを設定する方法

SWELL
目次

はじめに

SWELLのデフォルトフォントも読みやすくて素敵ですが、こんな悩みはありませんか?

  • 「他のSWELLサイトと似た印象になってしまう…」
  • 「もう少しブランドに合う雰囲気にしたい」
  • 「高級感や親しみやすさを出したい」

そんなときに便利なのが Google Fonts(グーグルフォント) です。

フォントでサイトの印象は劇的に変わる

Googleフォント適用すると、たとえば、このような印象をつくることができます。

  • ビジネス系サイト → スタイリッシュで信頼感のある印象に
  • ブログ → 柔らかく親しみやすい雰囲気に
  • ポートフォリオ → 洗練された高級感を演出

この記事では、初心者の方でも10分で設定できる方法を、詳しく解説します。

設定の全体の流れ

以下の4ステップで完了します。

  1. Google Fontsで好きなフォントを選ぶ
  2. フォントの読み込みコードを取得する
  3. WordPressのheadタグにコードを追加する
  4. CSSでフォントを反映させる

所要時間： 約10分
難易度： (初心者向け)

Step1: Google Fontsでフォントを選ぶ

1. Google Fontsにアクセス

まずは Google Fonts にアクセスします。

2. フォントを検索・選択

画面上部の検索バーから使いたいフォントを探します。

日本語フォントを探す場合:

  • 左サイドバーの「Language」から「Japanese」を選択
  • 日本語対応フォントのみが表示されます

3. フォントのプレビュー

気になるフォントをクリックすると、実際の表示サンプルが確認できます。

  • 太さ(ウェイト)の種類
  • 文字の雰囲気
  • 読みやすさ

本文には可読性の高いゴシック体、見出しには印象的な明朝体やセリフ体を選ぶとメリハリがついて見やすくなります。

Step2: フォントの読み込みコードを取得する

1. フォントを選択

使いたいフォントが決まったら、フォント名の右側にある 「Get font」 ボタンをクリックします。

2. ウェイト(太さ)を選ぶ

  • 右上の 「Get embed code」 をクリック
  • 左側のフォント表示部分で太さが選べます

選ぶウェイトが多いほど読み込みが重くなります。なるべく 1〜2種類までに絞る のがおすすめです。
推奨：Regular(400)とBold(700)の2つがあれば十分

3. 埋め込みコードを取得

  1. 右側「Web」タブの<Link>が選択されていることを確認
  2. 「Embed code in the <head> of your html」の「Code copy」をクリック

コード例:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap" rel="stylesheet">

Step3: コードをSWELLに追加する

1. WordPress管理画面へ

WordPressの管理画面にログインします。

2. カスタマイザーを開く

「外観」→「カスタマイズ」 をクリック

3. 高度な設定を開く

  1. カスタマイザー左メニューの 「高度な設定」 をクリック
  2. 「headタグ終了直前に出力するコード」 の入力欄を探す

4. コードを貼り付け

先ほどコピーしたGoogle Fontsのコードを貼り付けます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap" rel="stylesheet">

5. 公開ボタンをクリック

画面上部の 「公開」 ボタンをクリックして設定を保存します。

Step4: CSSでフォントを指定する

1. 追加CSSを開く

カスタマイザーに戻り、「追加CSS」 をクリックします。

2. フォントを適用するCSSを記述

以下のコードを参考に、使いたい箇所にフォントを指定します。

パターン1: サイト全体に適用

body {
  font-family: "Zen Maru Gothic", sans-serif;
}

パターン2: 見出しだけ変更

h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
}

パターン3: 本文と見出しで使い分け

/* 本文全体 */
body {
  font-family: "Zen Maru Gothic", sans-serif;
}

/* 見出しのみ */
.post h2,
.post h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
}

パターン4: より詳細な指定

/* 本文 */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

/* メイン見出し(H1) */
h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
}

/* 記事内の見出し(H2, H3) */
.post h2,
.post h3 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
}

/* ボタンテキスト */
.wp-block-button__link {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

3. 公開して確認

「公開」 をクリックして、実際のサイトで表示を確認します。

確認ポイント:

  • フォントが正しく反映されているか
  • 読みやすさは問題ないか
  • デザインの統一感はあるか

用途別おすすめフォント5選

1. Noto Sans JP – 万能型・ビジネス向け

  • 特徴
    Googleとアドビが共同開発した高品質フォント
  • おすすめ用途
    コーポレートサイト、公式サイト、情報サイト
  • 印象
    信頼感、読みやすさ、スタイリッシュ
body {
  font-family: "Noto Sans JP", sans-serif;
}

2. Zen Maru Gothic – 柔らかい・親しみやすい

  • 特徴
    丸ゴシック体で優しい印象
  • おすすめ用途
    ブログ、個人サイト、子育てサイト
  • 印象
    温かみ、親しみやすさ、柔らかさ
body {
  font-family: "Zen Maru Gothic", sans-serif;
}

3. M PLUS Rounded 1c – カジュアル・ポップ

  • 特徴
    さらに丸みが強調されたデザイン
  • おすすめ用途
    カフェサイト、趣味ブログ、クリエイティブ系
  • 印象
    楽しさ、カジュアル、明るさ
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

4. Cormorant Garamond – 高級感・エレガント(英字)

  • 特徴
    セリフ体の美しい欧文フォント
  • おすすめ用途
    見出し、ポートフォリオ、高級ブランドサイト
  • 印象
    エレガント、高級感、クラシック
h1, h2 {
  font-family: "Cormorant Garamond", serif;
}

5. Sawarabi Mincho – 和風・落ち着いた雰囲気

  • 特徴
    日本語明朝体で繊細な印象
  • おすすめ用途
    和食サイト、文学サイト、伝統工芸
  • 印象
    和の美しさ、落ち着き、上品
body {
  font-family: "Sawarabi Mincho", serif;
}

フォントの読み込み速度を最適化する方法

Google Fontsは便利ですが、使いすぎるとサイトの表示速度が遅くなります。 以下の対策で快適な表示速度を保つことができます。

最適化ポイント1: フォント数を絞る

悪い例:

  • 本文用に3種類
  • 見出し用に2種類
  • 装飾用に1種類

良い例:

  • 本文用に1種類(日本語)
  • 見出し用に1種類(英字のみ)

全体で1〜2種類までに絞るのがおすすめです。

最適化ポイント2: ウェイトを最小限に

悪い例:

100, 200, 300, 400, 500, 600, 700, 800, 900 すべて読み込む

良い例:

400(Regular), 700(Bold) の2つだけ

最適化ポイント3: font-displayを指定

コード取得時のURLに &display=swap が含まれていることを確認します。

<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap" rel="stylesheet">

display=swap により、フォント読み込み中もテキストが表示され、UX(ユーザー体験)が向上します。

最適化ポイント4: preconnectで事前接続

以下の2行を必ず含めることで、読み込み速度が改善されます。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

速度を測定

設定後は以下のツールで速度を確認してみてください。

  • PageSpeed Insights
    https://pagespeed.web.dev/
  • GTmetrix
    https://gtmetrix.com/

目標
モバイルスコア 80以上、デスクトップ 90以上

よくある質問とトラブルシューティング

フォントが反映されないとき

以下を確認してください

  1. キャッシュをクリア
    • ブラウザのキャッシュクリア(Ctrl + Shift + Delete)
    • SWELLの高速化設定でキャッシュをクリア
    • プラグイン(WP Fastest Cache等)のキャッシュもクリア
  2. コードが正しく挿入されているか確認
    • headタグ内に埋め込みコードがあるか
    • コードに誤字・脱字がないか
  3. CSSの記述ミスをチェック
    • セミコロン;の付け忘れ
    • クォーテーション"の閉じ忘れ
    • フォント名のスペルミス

一部の文字だけフォントが変わらない

CSS優先度の問題かもしれません。より具体的なセレクタを使ってみてください。

/* 弱い指定 */
h2 {
  font-family: "Zen Maru Gothic", sans-serif;
}

/* 強い指定 */
.post h2,
article h2 {
  font-family: "Zen Maru Gothic", sans-serif !important;
}

!importantは最終手段として使用してください。

スマホで見ると表示が遅い

フォントの読み込みが重すぎる可能性があります。

対策:

  • フォント数を1〜2種類に減らす
  • ウェイトを必要最小限に絞る
  • display=swapを指定する

日本語フォントなのに英字だけ変わる

日本語部分には別のフォントが適用されています。

/* 日本語と英字の両方を指定 */
body {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

商用利用しても大丈夫?

Google Fontsは基本的にすべて商用利用可能です。

ただし念のため、各フォントの「License」タブでライセンスを確認してください。
ほとんどが SIL Open Font License または Apache License です。

まとめ

SWELLでGoogleフォントを使うには、こちらの４ステップで簡単に設定できます。

設定の4ステップ

  1. Google Fontsでフォントを選ぶ
  2. 埋め込みコードを取得する
  3. headタグにコードを追加する
  4. CSSでフォントを反映させる

重要ポイント

  • フォント数は 1〜2種類 に絞る
  • ウェイトは 必要最小限(Regular + Bold程度)
  • 表示速度 を定期的にチェック
  • キャッシュクリア を忘れずに

次のステップ

フォントを変更したら、以下もチェックしてみてください。

  • 行間(line-height)の調整 で読みやすさアップ
  • 文字サイズ(font-size)の最適化
  • 色(color)の調整 でブランドカラーと統一
  • 太字の強弱 で情報の階層を作る

これだけで、サイトの印象がぐっと変わります。
自分のブランドに合ったフォントを見つけて、デザインを一段と引き立ててみてください!

WordPress個別サポート

  • 自分でやってみたけれどうまくいかない
  • やりたいことはあるけど方法がわからない

そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。

詳細はこちらから
SWELL

関連記事

目次