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

おばけ

SWELLのフォントをgooleフォントに変えれる？

SWELLでは、カスタマイズ機能を使ってサイトのフォントを変更することができます。
元々の設定で選べるフォントの種類は、【游ゴシック】【メイリオ（Windows標準）/ヒラギノ（Mac/iOS標準）】【Noto Sans JP】【明朝体】の4種類から選べます。
デフォルトのフォントも見やすくて使い勝手が良いですが、よりデザインやテーマに合うフォントを使いたいという時もあるはず◎

この記事では、SWELLで作ったブログやWebサイトでGoogleフォントを利用する方法を紹介します！

Googleフォントとは？

Googleフォントとは、Googleが提供しているWebフォントで、2024年9月時点で、1,700種類以上のフォントが提供されており、その中には60種類以上の日本語フォントも含まれています。

無料で使用することができ、商用利用も可能です。

Googleフォントを使うとこんなメリットが！

• Webフォントは、インターネット上からフォントを読み込むため、デバイスに関係なく同じデザインで表示できる
• 使用は無料＆商用利用も可能
• 手軽にブログやサイトのデザインに統一感が出せる

SWELLでGoogleフォントを使う方法

SWELLで運営しているブログやサイトでGoogleフォントを使う方法を解説していきます◎

• Google Fontsから好みのフォントを探し、コードをコピーする
• htmlタグを貼り付ける
• CSSを追加する

STEP

Google Fontsから好みのフォントを探し、「Get font」からコードをコピーする

STEP

htmlタグを貼り付ける

「Get font」→「Get embed code」からコードをコピーする

上でコピーしたコードを、【SWELLダッシュボード】→【外観】→【カスタマイズ】→【高度な設定】→「headタグ終了直前に出力するコード」に貼り付ける。

STEP

CSSを追加する

再度、Googleフォントから「Get font」→「Get embed code」を選択した時に出てくるCSSコードを、【SWELLダッシュボード】→【外観】→【カスタマイズ】→【追加CSS】に貼り付けます。

追加CSSコード

当サイトは小杉丸ゴシックを使用しているため以下のような記述になっていますが、下記の”○○○”の部分を変更したいフォント名に変更して使用してください◎

body {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
}

【まとめ】フォントの変更は手軽にサイトの雰囲気を変えたい時にもおすすめ

この記事では、SWELLで作ったブログやWebサイトでGoogleフォントを利用する方法を紹介しました！

フォントのデザインを変えただけで、ブログやサイトの印象ががらりと変わりますね◎

ぜひ、ブログやWebサイトのイメージチェンジにお役立てください◎

それでは

▶ 次に読むと効果的な記事