【SWELL】Googleフォントを使う方法

はじめに

SWELLのデフォルトフォントも読みやすくて素敵ですが、
「もう少し雰囲気を変えたい」
「ブランドに合うフォントを使いたい」
というときに便利なのが Google Fonts（グーグルフォント） です。

この記事では、SWELLでGoogleフォントを設定する方法を初心者の方にもわかりやすくご紹介します。

手順の流れ

• Google Fontsで好きなフォントを選ぶ
• フォントの読み込みコードを取得する
• WordPressにコードを追加する
• CSSでフォントを反映させる

Google Fontsでフォントを選ぶ

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

検索バーから使いたいフォントを探します。
たとえば、このサイトでは
本文は「Zen Maru Gothic」
英字見出しは「Cormorant Garamond」
を使用しています。

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

使いたいフォントを選んだら、右上の「Get Embed Code」からコードをコピーします。

このコードが、Googleフォントをサイトに読み込むためのものです。

コードをSWELLに追加する

SWELLでは、テーマファイルを編集せずに
「カスタマイズ」＞「高度な設定」＞「headタグ終了直前に出力するコード」
から追加できます。

コピーしたリンクタグを、以下のように貼り付けます。

「公開」をクリックして反映しましょう。

CSSでフォントを指定する

次に、使いたい箇所でフォントを反映させます。
「外観」＞「カスタマイズ」＞「追加CSS」に以下を追記します。

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

これで、サイト全体がZen Maru Gothicのフォントになります。

特定の見出しだけ変えたい場合は、たとえば以下のように指定します。

h2, h3 {
  font-family: "Cormorant Garamond", serif;
}

フォントの読み込み速度に注意

Google Fontsは便利ですが、フォント数が多いとサイト表示が少し重くなることもあります。

なるべく 1〜2種類までに絞る のがおすすめです。

まとめ

SWELLでGoogleフォントを使う手順はとても簡単です。

• Google Fontsでコードを取得
• 「headタグに挿入」へ追加
• CSSで反映

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