SWELLでGoogleフォントの使い方ガイド｜表示速度も意識した7つのコツ

SWELLでブログを書いていると、「デザインは好きだけど、フォントを変えたらもっと自分らしくなりそうだな…」と感じることはありませんか？

でも、GoogleフォントとかCSSと聞くと、それだけでちょっと構えてしまう人も多いと思います。

この記事では、そんなSWELLユーザーに向けて、SWELLでのGoogleフォントの使い方をできるだけやさしくまとめました。

この記事で分かること

SWELL標準フォントとGoogleフォントの違いと、どう選び分ければいいか
SWELLでGoogleフォントを読み込んで反映させる4ステップの手順
ブログやコーポレートサイトに合う、おすすめのGoogleフォント例
表示速度を落としにくいGoogleフォントの使い方と、注意したいポイント
フォントが反映されないときに確認したいチェックリスト

結論から言うと、SWELLは「headタグにコードを追加する」と「追加CSSで指定する」の2つさえできれば、Googleフォントをかなり自由に扱えます。

この記事の手順どおりに進めれば、初心者でもデザインと表示速度のバランスを意識しながら、フォントを安心してカスタマイズできるようになります。

SWELLでフォントを変えるとサイトはどう変わる？
Googleフォント（Google Fonts）の基本と選び方
SWELLでGoogleフォントを使う手順（基本の4ステップ）
用途別おすすめGoogleフォントとSWELLでの使い方
表示速度とSEOを意識したGoogleフォントの使い方
SWELLでGoogleフォントが反映されないときの対処法
よくある質問（SWELLのGoogleフォント・使い方編）
まとめ：SWELLでGoogleフォントを上手に使うコツ

SWELLでフォントを変えるとサイトはどう変わる？

ごとう

最初に、SWELLのフォント設定で何ができるのか、そしてGoogleフォントを組み合わせるとどう変わるのかを整理しておきます。

SWELL標準フォント4種類と特徴

SWELLには、最初から4種類のベースフォントが用意されています。
WordPress管理画面の「外観＞カスタマイズ＞サイト全体設定＞基本デザイン＞フォント設定」から選べるものですね。

フォント名	種類	雰囲気・印象	向いているサイト例	ひと言メモ
游ゴシック	ゴシック体	すっきり・現代的で読みやすい	ブログ全般・メディアサイト	SWELLの初期設定。クセが少なく、どんなジャンルにも合わせやすい
ヒラギノゴシック＞メイリオ	ゴシック体	落ち着いた印象・安定感	ビジネス系・実用的な情報サイト	Macではヒラギノ、Windowsではメイリオが使われる、定番の組み合わせ
Noto Sans JP	ゴシック体	フラット・スッキリ・モダン	Webサービス系・シンプルなブログ	Google Fontsにもある日本語フォント。SWELLの標準からも選べる
明朝体（Noto Serif JP）	明朝体	上品・じっくり読ませる雰囲気	コラム・エッセイ・和風サイト	タイトルや見出しに使うと、文章系サイトの雰囲気を出しやすい

この4種類だけでも、実はかなり印象が変わります。
最初は標準の游ゴシックで運用して、少し慣れてきたらNoto Sans JPや明朝体を試す、という流れもおすすめです。

それでも、「他のサイトと似た雰囲気になってしまうな…」と感じたときに、Googleフォントが活きてきます。

SWELL標準フォントとGoogleフォント、どっちを使うべき？

ざっくりとした考え方は次のとおりです。

表示速度と安定性を最優先したいとき
→ SWELL標準フォント（游ゴシック／ヒラギノゴシック＞メイリオ）だけで完結させる
読みやすさとデザインのバランスを取りたいとき
→ ベースはNoto Sans JPにして、見出しだけ別のGoogleフォントを重ねる
世界観をしっかり作り込みたいとき
→ 本文と見出しでフォントを分けて、Googleフォントを1〜2種類だけ足す

私も最初はNoto Sans JPだけで運用していたのですが、見出しに丸みのあるフォントを足しただけで、「同じテーマとは思えない」と言われるくらい印象が変わりました。

フォントは、レイアウトや色をいじらなくてもサイトの雰囲気を変えられる、コスパのいい要素です。SWELLを使っているなら、ここを触らないのはもったいないなと感じています。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

Googleフォント（Google Fonts）の基本と選び方

ごとう

次に、そもそもGoogleフォントとは何かと、SWELLと組み合わせるときの選び方のコツを整理します。

Googleフォントとは？メリット・デメリット

Googleフォントは、Googleが提供している無料のWebフォントサービスです。
パソコンにインストールされていないフォントでも、インターネット越しに読み込んで表示できます。

項目	内容
主なメリット	無料で商用利用できるものが多い／ブラウザやOSが違っても同じ見た目になる／日本語・英語ともに種類が多く、デザインの選択肢が広がる
主なデメリット	外部サーバーからフォントを読み込むため、リクエストが増えると表示が重くなりやすい／日本語フォントはデータ量が大きくなりやすい／設定ミスがあるとフォントが反映されない
SWELLでの注意点	「読み込む設定」と「どこに適用するかのCSS」の両方が必要／フォントの種類やウェイトを欲張りすぎないことが大切

「Googleフォントを入れたら急にサイトが遅くなった」という話も、よく耳にします。
ただ、それは大抵「入れすぎ」か「読み込み方の問題」です。

使うフォントを絞って、設定のポイントを押さえれば、デザインと速度の両方をある程度両立させることは十分可能です。

サイトの雰囲気別・フォント選びの考え方

フォント選びで迷う原因のひとつは、「どんな雰囲気にしたいか」を決める前に、いきなり一覧から探そうとすることです。

先に、サイトのキャラクターをざっくり決めておきましょう。

ビジネス系・士業・コーポレートサイト
→ 読みやすさと信頼感が大事。ベースは素直なゴシック体、見出しで少しだけアクセントを付ける
日記・子育て・ハンドメイド系ブログ
→ 丸ゴシックや手書き風のフォントで、やさしさや親しみを出す
ポートフォリオやデザイン系サイト
→ 本文は読みやすさ重視、タイトルや見出し、ロゴで個性があるフォントを使う
長文が多いメディア・解説サイト
→ ベースはNoto Sans JPや游ゴシックなど、長文でも疲れにくいフォントを優先する

このあと紹介する「用途別おすすめフォント」のパートと合わせて読みながら、自分のサイトに合いそうな方向性をイメージしてみてください。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

SWELLでGoogleフォントを使う手順（基本の4ステップ）

ごとう

ここからは、SWELLでGoogleフォントを設定する具体的な手順を4ステップで解説します。最初にざっくりと流れを頭に入れておくと、作業がスムーズです。

手順の全体像：4ステップ

まず、作業の全体像を表で整理しておきます。

ステップ	やること	作業場所
STEP1	Google Fontsで使いたいフォントを選ぶ	Google Fonts公式サイト
STEP2	埋め込みコード（<link>タグなど）を取得する	Google Fonts公式サイト
STEP3	SWELLの「headタグ終了直前に出力するコード」に貼り付ける	外観＞カスタマイズ＞高度な設定
STEP4	追加CSSで、どの部分にGoogleフォントを適用するか指定する	外観＞カスタマイズ＞追加CSS

この4つができれば、SWELLでのGoogleフォントの使い方はほぼマスターと言って大丈夫です。

STEP1：Google Fontsで日本語フォントを選ぶ

まずは、Google Fontsのサイトで日本語フォントを選びます。

Google Fontsのサイトを開く
メニューから「Language」などの項目を探し、「Japanese」を選ぶ
表示された日本語フォントの中から、気になるものをクリックして詳細を開く
プレビューやウェイト（太さ）を確認する

ポイントは、ウェイトを欲張りすぎないことです。
Regular（400）とBold（700）の2つくらいに絞ると、見出しと本文のメリハリも付けやすく、読み込みもそこまで重くなりません。

私は「とりあえず全部チェックしておこう」と思って、最初にウェイトをたくさん選んでしまい、PageSpeed Insightsで怒られたことがあります…。
最初から用途を決めて、必要な太さだけ選ぶのがおすすめです。

STEP2：埋め込みコードを取得して整理する

次に、選んだフォントをサイトに読み込むためのコードを取得します。

フォントの詳細ページで「Get font」や「Embed code」を探す
「<head>に貼り付けてください」と書かれたエリアのコードをコピーする

よくある例は、次のような形です。

<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">

ここで意識したいポイントは2つです。

preconnectの2行も含めてコピーすること（フォント読み込みの体感速度を上げやすくなります）
URLの末尾に「display=swap」が付いているコードを使うこと（フォント読み込み中のチラつきを減らすための設定です）

この3行を、あとでSWELL側の「headタグ終了直前に出力するコード」の欄に貼り付けるイメージで覚えておいてください。

STEP3：SWELLのheadにGoogleフォントのコードを貼る

続いて、SWELLにGoogleフォントを読み込んでもらう設定をします。

WordPress管理画面で「外観＞カスタマイズ」を開く
左のメニューから「高度な設定」をクリックする
「headタグ終了直前に出力するコード」という入力欄を探す
STEP2でコピーした3行のコードを、その欄に貼り付ける
右上の「公開」ボタンを押して保存する

すでに他のコード（アクセス解析など）が入っている場合は、消さずに一番下に改行して追記すればOKです。

このステップが終わった段階で、「フォントファイルを読み込む準備」ができた状態です。
まだどこにも指定していないので、画面上のフォントは変わっていません。

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

STEP4：追加CSSでフォントを反映させる

最後に、「サイトのどの部分にGoogleフォントを適用するか」をCSSで指定します。

もう一度「外観＞カスタマイズ」を開く
一番下にある「追加CSS」をクリックする
以下のようなCSSを追記する

例：サイト全体の本文をZen Maru Gothicにする場合

body {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
}

例：見出しだけ別のフォントにする場合

h1, h2, h3, h4, h5, h6 {
  font-family: "Dela Gothic One", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

SWELLの特定パーツだけを変えたいときは、ブラウザの検証ツールでクラス名を調べて、そのクラスに対してfont-familyを指定してあげれば、その部分だけGoogleフォントに切り替えられます。

CSSが苦手な場合は、いきなりあちこち触らずに、まずは

bodyだけ指定して全体の雰囲気を確認する
次にh2など、よく使う見出しだけ変えてみる

という順番で試すと、トラブルが少なく安心です。

用途別おすすめGoogleフォントとSWELLでの使い方

ごとう

ここからは、実際にどんなGoogleフォントを選ぶと失敗しにくいかを、用途別に紹介していきます。SWELLでの具体的な使い方のイメージも合わせて見てみましょう。

ブログ・メディア向けおすすめフォント

雑記ブログやアフィリエイトサイトなど、文章量が多いサイトは、とにかく「読みやすさ」が大事です。

サイトタイプ	日本語フォント候補	英字・ロゴ用フォント候補	SWELLでの使い方の例
雑記ブログ・日記	Noto Sans JP / 游ゴシック	なしでもOK	本文は標準フォント、見出しだけ太めにしてメリハリをつける
子育て・ライフスタイル	Zen Maru Gothic / M PLUS Rounded 1c	細めの英字フォントを少しだけ	本文は丸ゴシック、見出しを少し大きめにして親しみやすさを出す
Web制作・デザインブログ	Noto Sans JP	Cormorant Garamond / Roboto など	本文はNoto Sans JP、h1〜h3で欧文フォントを併用してデザイン性を出す
解説系メディア	Zen Kaku Gothic New など、くっきりしたゴシック	Playfair Display など落ち着いた英字フォント	本文は読みやすさ重視、図表の見出しにだけ別フォントを使う

まずはベースとなる日本語フォントを1つ決めて、余裕があれば英字用のフォントを「ロゴやメイン見出しだけ」に使うくらいが、バランス的にもおすすめです。

コーポレート・サービスサイト向けおすすめフォント

コーポレートサイトやサービスの紹介ページでは、「信頼感」と「分かりやすさ」がとても重要です。

本文：Noto Sans JPや游ゴシックなど、クセが少ないゴシック体
見出し：太めのゴシック体、もしくは落ち着いたセリフ体のフォント

こうした組み合わせにすると、読みやすさを保ちながら、デザインにも少し特徴を持たせることができます。

SWELLでは、たとえば次のようなイメージです。

ベースフォント：SWELL標準の游ゴシックかNoto Sans JP
h1〜h3：GoogleフォントでDela Gothic Oneなどの太めフォントを指定して、タイトルをしっかり目立たせる

これだけでも、同じ内容のページがぐっと読みやすく、印象に残りやすくなります。

見出しだけGoogleフォントにするパターン

【稼げるキーワード教えます】
▼　　▼　　▼

実務的によく使われるのが、「本文は標準フォントのまま、見出しだけGoogleフォントにする」パターンです。

このやり方だと、

本文の読みやすさと表示速度をキープしながら
見出しとタイトルだけ、サイトの世界観をしっかり出せる

という良いとこ取りができます。

CSSのイメージはこんな感じです。

body {
  font-family: "游ゴシック体", "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
}

h2, h3 {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

このくらいのカスタマイズなら、SWELLとGoogleフォントの使い方にまだ慣れていない人でも、試しやすいと思います。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

表示速度とSEOを意識したGoogleフォントの使い方

ごとう

ここからは、SWELLでGoogleフォントを使うときに、表示速度やSEOへの悪影響をできるだけ抑えるコツをまとめます。

読み込みを軽くする3つのポイント

Googleフォントは便利ですが、設定次第では表示速度を落としてしまいます。
最低限押さえておきたいポイントを3つに整理しました。

項目	やること・考え方
フォントファミリーの数	日本語フォントは1〜2種類までにする。英字フォントも増やしすぎない
ウェイト（太さ）の数	よく使う太さだけに絞る（例：400と700）。不要な100〜900を全部読み込まない
読み込み方法	preconnectを使う／display=swapを付ける／不要になったフォントのコードは残さない

「せっかくだからいろいろ入れておこう」と思って、

日本語フォント3種類
英字フォント2種類
ウェイトも細かく全部

という状態にすると、一気にページが重くなってしまいます。

フォントは「本当に使っているものだけ」に絞るだけでも、体感の速さがかなり変わります。

PageSpeed Insightsでフォントの影響を確認する

感覚だけだと分かりづらいので、GoogleのPageSpeed Insights（PSI）でスコアや診断を確認するのもおすすめです。

PageSpeed Insightsにアクセスする
自分のサイトのURLを入力する
モバイルとパソコン、それぞれの結果を見る
「診断」や「改善できる項目」にフォント関連の注意点が出ていないか確認する

フォント関連でよく出てくるのは、

使用していないフォントを減らしましょう
テキストの表示をブロックするリソースを減らしましょう

といったメッセージです。

こうした注意が出てきたら、

使っていないフォントの読み込みコードを削除する
ウェイトの種類を減らす（例：太さ2つだけにする）

といった調整をしてみると、スコアが改善しやすくなります。

あえてGoogleフォントを使わない判断基準

ここまでGoogleフォントの使い方を説明してきましたが、「あえて使わない」という選択肢も十分ありです。

たとえば、

アクセス数が多いニュース系サイトや情報メディア
とにかく速度が大事なSEO重視サイト
ユーザーの通信環境があまり良くない可能性が高いジャンル

こういったサイトでは、

SWELL標準フォント（游ゴシック／ヒラギノゴシック＞メイリオ）のみで運用する
Noto Sans JPや明朝体も含めて、「標準フォントだけ」で完結させる

という構成にした方が、結果的にユーザーにも検索エンジンにもやさしい場合があります。

逆に、ブランディングや世界観が大事なサイトなら、

本文は標準フォント
ロゴと見出しだけGoogleフォント

といったように、使う場所を絞るのもひとつの戦略です。

SWELLでGoogleフォントが反映されないときの対処法

ごとう

ここでは、SWELLでGoogleフォントを設定したのに「変わってくれない…」というときの、よくある原因とチェックポイントをまとめます。

フォントが反映されないときのチェックリスト

ありがちなトラブルを表に整理しました。困ったときは、上から順に確認してみてください。

症状	主な原因候補	確認ポイント
サイト全体でまったくフォントが変わらない	headへのコードが正しく入っていない／URLのコピー漏れ	「高度な設定」の欄にlinkタグ3行が入っているか／URLの途中で改行されていないか
一部の場所だけフォントが変わらない	CSSのセレクタが弱い／別のCSSに上書きされている	ブラウザの検証ツールで、最終的にどのfont-familyが効いているかを確認する
パソコンでは変わるが、スマホでは変わらない	キャッシュが残っている／レスポンシブ用のCSSで別指定がある	キャッシュプラグインやブラウザキャッシュを削除する／@mediaの中の指定を確認する
一度は変わったのに、いつの間にか元に戻った	後から追加したCSSやプラグインで上書きされている／CSSの記述ミス	追加CSSの末尾でセミコロン抜けがないか／最近触った設定を思い出して確認する

まずは、

ブラウザ・サーバー・キャッシュ系プラグインのキャッシュを削除する
「高度な設定」と「追加CSS」の両方を見直す

この2つから順番に見ていくと、原因にたどり着きやすいです。

一部だけフォントが変わらない・スマホだけ違うとき

よくあるのが、「見出し用にh2にフォントを指定したのに、サイドバーの見出しだけ変わらない」「スマホ表示に切り替えたら別のフォントになっている」というパターンです。

この場合、多くは次のような理由です。

SWELL側の別のクラス（サイドバー用のクラスなど）でfont-familyが指定されている
レスポンシブ対応用のCSS（@mediaの中）で、スマホ向けに別の指定が上書きされている

対処法としては、

より具体的なセレクタで指定する（例：.post_content h2 のように範囲を絞る）
どうしても勝てない場合は、最終手段としてfont-familyに!importantを付ける

といったやり方があります。

ただし、!importantを多用すると後から自分でも分かりにくくなるので、「ここだけはどうしても変えたい」という場所に限定して使うのが安心です。

どのサイトが何のフォントを使っているか調べる方法

「このサイトのフォント、いい感じだな」と思ったら、そのサイトが何を使っているのか調べてみると、自分のフォント選びの参考になります。

おすすめなのが、ブラウザ拡張機能の「WhatFont」などのツールです。
有効にした状態で文字の上にカーソルを置くと、

フォント名
文字サイズ
行間

などが表示されます。

気に入ったフォントが分かったら、Google Fontsで同じ名前を検索して、SWELLでも使ってみる、という流れがスムーズです。

★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

よくある質問（SWELLのGoogleフォント・使い方編）

ごとう

最後に、SWELLとGoogleフォントの使い方について、よくある質問にQ&Aで答えていきます。

Q1：SWELLでGoogleフォントを使うと、サイトは重くなりますか？

A：使い方によります。

日本語フォントはどうしてもデータ量が大きくなりやすいので、たくさん読み込むと表示が遅くなりがちです。
ただし、

日本語フォントは1〜2種類までにする
ウェイトはよく使う太さだけに絞る（例：400と700）
preconnectとdisplay=swapを使う

といった基本を守れば、実用的な速度を保ちながら、SWELLでGoogleフォントを使うことは十分可能です。

Q2：CSSが苦手ですが、SWELLのGoogleフォントの使い方は難しいですか？

A：最初は少し戸惑うかもしれませんが、慣れてしまえばやることはシンプルです。

やるべきことは、

SWELLの「高度な設定」でheadにGoogleフォントのコードを貼る
「追加CSS」でどこにフォントを適用するか指定する

この2つだけです。

いきなりサイト全体を変えようとせず、

まずはbodyだけフォントを変えてみる
次にh2などの見出しだけ変えてみる

といったように、少しずつステップを踏んでいけば、CSSが得意でなくても十分対応できます。

Q3：日本語と英語でフォントを分けることはできますか？

A：はい、工夫すれば可能です。

たとえば次のように、英語部分にだけクラスを付けておき、そのクラスに対して英字用のGoogleフォントを指定する方法があります。

body {
  font-family: "Noto Sans JP", sans-serif;
}

.site-title .en {
  font-family: "Cormorant Garamond", serif;
}

SWELLのサイトタイトルやロゴ部分で英語を使っているなら、その部分にクラスを付けて、英字フォントだけ別に指定するやり方がよく使われます。

まとめ：SWELLでGoogleフォントを上手に使うコツ

この記事の内容をまとめます

SWELLには標準フォントが4種類あり、速度や読みやすさだけを考えるなら標準のままでも十分
Googleフォントを使うときは、「headに読み込みコードを追加」と「追加CSSで適用範囲を指定」の2ステップが基本
日本語フォントやウェイトを増やしすぎるとサイトが重くなるので、種類はできるだけ絞る
見出しだけGoogleフォントにするパターンは、デザインと表示速度のバランスが良くて実用的
トラブルが起きたら、キャッシュ・コードの貼り付け場所・CSSの優先度の3つを順番に確認する

今日からできる最初の一歩としては、

自分のサイトの雰囲気（ビジネス寄り・やわらかい系・デザイン重視など）を紙やメモに書き出す
Google Fontsで「Japanese」を選び、イメージに合うフォントを2つほどピックアップする
この記事のSTEP1〜4に沿って、まずはテスト用の固定ページでGoogleフォントを試してみる

この3つをやるだけでも、「なんとなく難しそう」と感じていたSWELLでのGoogleフォントの使い方が、ぐっと現実的に思えてくるはずです。

焦らず一つずつ試しながら、自分のサイトにぴったりなフォントと世界観を、SWELLで育てていきましょう。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

記事を読んだらコチラ
▼　　▼　　▼