SWELL｜サイトにGoogleフォントに適用する方法

この記事では、SWELLで構築するWebサイトにGoogleフォントを利用する方法について説明しています。

SWELLではサイトのフォントの種類を変更するための設定があります。
が、ここで選択できるのは游ゴシック・ヒラギノ(メイリオ)・Noto Sans JP・明朝体の4種類。
よりオリジナリティを出したり、世界観を統一するために、Googleフォントを使ってみましょう！

デフォルトの機能でフォントを変更する方法については開発者さんの記事をご確認ください。

Googleフォントって？

Webサイトをおしゃれにしたい！と思ったときに、「フォント」（文字のデザイン）はとっても大事なポイントですよね。

そんなときに便利なのが 「Googleフォント」 です。
Googleフォントとは、Googleが提供している無料で使えるWebフォントのこと。

※Webフォントとは、インターネット上からフォントを読み込むので、どのデバイスでも同じデザインで表示できます。
「自分のパソコンではおしゃれなフォントなのに、他の人の画面では違うフォントになってしまう…」
などの心配がありません！

Googleフォントを使うメリット

改めてGoogleフォントを使うメリットをまとめると以下の通り。

• どんなデバイスでも統一されたデザインに！
  スマホ・PC・タブレット…どの環境でも、指定したフォントがしっかり適用されます！

• 無料で使えて、商用利用もOK！
  Googleフォントはすべて無料で提供されていて、商用利用（ビジネスサイトやブログなど）も可能です。

• サイトの世界観を変えられる！
  フォントを変えるだけで、サイトの雰囲気が一気に「おしゃれ」「かわいい」「高級感」など、
  世界観を作り出すことができます！

SWELLでGoogleフォントを適用する手順

SWELLで構築したサイトにGoogleフォントを適用するには、以下の手順を行います。

1. Google Fontsから好きなフォントを選ぶ
2. フォントの読み込み設定をする
3. CSSを追加する

順番に解説していきますね✨

Google Fontsから好きなフォントを選ぶ

まずは、Google Fontsの中から適用したいフォントを選びます。

Googleフォントの読み込み

次に、先ほどコピーしたコードをサイトで読み込むための設定をします。
「外観」→「カスタマイズ」→「高度な設定」→「headタグ終了直前に出力するコード」に貼り付けます。

CSSの追加

最後に、CSSを追加していきます。
「外観」→「カスタマイズ」→「追加CSS」に、以下のコードを記述&貼り付けします。

CSSは以下よりコピーしてください。

CSS
//メインテキスト用
.p-mainVisual__slideTitle {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

変更したい箇所に応じて、classを指定してくださいね。

いかがでしたか？
Googleフォントを適用するだけで、サイトの世界観が一気に作られますよね！
初心者の方でも難しい操作などなくできますので、ぜひ挑戦してみてください✨