MENU
無料相談はこちらから
無料相談はこちらから

【SWELL】Googleフォントを使用する方法

SWELL
SWELL

WordPressテーマ「SWELL」では、簡単にGoogleフォントを導入して、サイトの雰囲気を変えることができます。この記事では、SWELLでのフォントGoogle設定方法を解説します。

目次

Googleフォントとは？

Googleフォントは、Googleが提供する無料のWebフォントサービスです。900種類以上のフォントが用意されており、商用利用も可能なため、ブログやWebサイトで自由に使えます。

SWELLでGoogleフォントを設定する手順

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

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

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

1. Google Fontsにアクセス

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

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

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

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

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

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

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

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

などを見ながら、サイトに合うフォントを探します。

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

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

1. フォントを選択

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

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

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

選ぶウェイトが多いほど読み込みが重くなります。なるべく 1〜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を記述

サイト全体に適用したい場合

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

見出しだけ変更したい場合

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

CSSセレクタを使った詳細設定

特定の場所だけフォントを変えたい場合は、セレクタを使って細かく指定できます。
セレクタを使うことで、サイト全体ではなく特定の要素だけをピンポイントで調整できるため、より理想的なデザインを実現できます。

3. 公開して確認

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

確認ポイント

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

Googleフォント使用時の注意点

表示速度への影響

Googleフォントは外部から読み込むため、サイトの表示速度に影響する可能性があります。
特に複数のフォントを読み込むと遅くなることがあるため、必要最小限に抑えてください。

システムフォントも検討する

表示速度を最優先する場合は、Googleフォントではなく、ユーザーの端末に最初から入っている「システムフォント」の使用も検討してください。
SWELLでは游ゴシックなどのシステムフォントも選択可能です。

モバイルでの見え方も確認

モバイルでの表示も確認してください。PCでは良く見えても、モバイルでは読みにくい場合があります。

まとめ

SWELLでのGoogleフォント設定は、カスタマイザーから簡単に行えます。
フォントを変えるだけでサイトの印象が大きく変わるため、いろいろ試してみて、最適なフォントを見つけてください。

WordPress個別サポート

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

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

詳細はこちらから
SWELL

関連記事

目次