SWELLのフォントおすすめは？変更・追加の方法を伝授

WordPressテーマのSWELLを使っていると、「なんとなくデザインを変えたいけど、フォントはどれを選べばいいんだろう？」と迷うことが多いと思います。

SWELLは標準のフォント設定だけでも十分きれいですし、Google Fontsなどを追加してあげると、ブログの世界観をぐっと作り込めます。

順番に見ていけば、フォント選びや設定で迷う時間をかなり減らせるはずなので、気楽な気持ちで読み進めてみてください。

SWELLでフォントを変えると何が変わる？印象と読みやすさの話

ブログの印象はフォントでここまで変わる

同じ文章でも、フォントが違うだけで伝わる印象はかなり変わります。

よくあるパターンを、ざっくり表にまとめるとこんな感じです。

フォントのタイプ	読者に伝わる印象	向いているサイト例
角ばったゴシック	シンプル・スッキリ・無機質	雑記ブログ、ガジェット、ニュース系
丸みのあるゴシック	やさしい・親しみやすい	子育て、ライフスタイル、美容ブログ
明朝体	上品・真面目・落ち着いた雰囲気	コラム、読書ブログ、士業サイト
デザインフォント	個性的・ポップ・目を引く	LP、キャンペーン、ポートフォリオ

読みやすさだけで見るなら、基本はゴシック体が無難です。

ただ、サイトの雰囲気をしっかり作り込みたいなら、本文は読みやすいゴシック体にしておいて、見出しやバナーだけデザイン性の高いフォントに変える、といった役割分担をしてあげるとバランスが取りやすくなります。

SWELL フォント 変更の基本：カスタマイザーでできること

SWELL標準フォントの種類とざっくりした特徴

SWELLでは、カスタマイザーの「サイト全体設定」から、サイト全体で使うフォントの種類をまとめて変更できます。

代表的な選択肢とざっくりした印象をまとめると、次のような感じです。

選べるフォント例	種類	ざっくりした印象	こんな人におすすめ
Noto Sans JP系	ゴシック体	クセが少なく読みやすい	まずは無難なフォントにしたい人
游ゴシック系	ゴシック体	やや細めでスタイリッシュ	少しデザイン寄りに寄せたい人
メイリオ系	ゴシック体	文字がやや大きく見える	年齢層高めの読者が多いサイト
Noto Serif JP系	明朝体	上品で落ち着いた印象	文章メインのコラムや読み物系ブログ

標準のまま使っていると、どのフォントが選ばれているか意識していない方も多いです。

一度、ターゲットや記事内容を思い浮かべながら選び直してあげるだけでも、「なんとなく既定のテーマ感」が薄まって、サイトの雰囲気が整ってきます。

サイト全体のフォントをSWELLで変更する手順

SWELLでサイト全体のフォントを変える手順は、とてもシンプルです。

• WordPress管理画面で「外観」→「カスタマイズ」を開く
• 「サイト全体設定」→「基本デザイン」→「フォント設定」をクリックする
• プルダウンから使いたいフォントを選ぶ
• 右側のプレビューで確認して、問題なければ「公開」を押す

この操作で、基本的にはサイト全体のフォントが切り替わります。

この段階では、外部のフォントサービスを追加しているわけではないので、表示速度の心配もほとんどいりません。

本文の文字サイズや行間も合わせて見直す

フォントを変えると、同じ数字のサイズでも「大きく見える」「小さく見える」がけっこう変わります。

細めのフォントにすると少し小さめに感じたり、メイリオのようなフォントは、同じサイズでも大きく見えたりします。

フォントを変更したタイミングで、次のポイントも一緒に見直すのがおすすめです。

• 本文のフォントサイズ（PCとスマホ両方）
• 行間（行の高さ）
• 見出しと本文のサイズ差（メリハリがあるかどうか）

とくにスマホで見たときに、文字が詰まりすぎていないか、逆にスカスカすぎないかをチェックしておくと、読みやすさがぐっと変わります。

SWELL フォント 追加の前に知っておきたい基礎知識

Webフォントとシステムフォントの違い

WordPressで使うフォントは、大きく分けると「システムフォント」と「Webフォント」の2種類があります。

種類	説明	メリット	デメリット
システムフォント	端末にもともと入っているフォント	読み込みが速く、表示が安定しやすい	選べるデザインの幅はやや狭い
Webフォント	外部サーバーなどから読み込むフォント	デザイン性の高いフォントを使える	読み込みが増えるぶん、表示に時間がかかることがある

SWELLでGoogle Fontsを使う場合は、この「Webフォント」を追加するイメージになります。

ざっくり言うと、「デザイン性と引き換えに、多少読み込みが増える可能性がある」という感じですね。

どの部分のフォントを変えたいか先に決めておく

いきなりフォントを追加していく前に、「どこをどう変えたいのか」を先に決めておくと、あとがすごく楽になります。

目的が決まっていると、あとでCSSを書くときも「この部分だけに適用する」とイメージしやすくなります。

ブログ運営で多いのは、本文は読みやすいフォント、見出しやボタンなど目立たせたいところだけ、少し個性的なフォントを使うパターンです。

SWELL フォント 追加のやり方：Google Fontsでの設定手順

Google Fontsで日本語フォントを探すステップ

まずは、使いたいフォントをGoogle Fontsで探します。

英字専用のフォントも多いので、日本語対応かどうかは必ずチェックしましょう。

• Google Fontsにアクセスする
• 言語（Language）の項目で「Japanese」を選ぶ
• 出てきた一覧から、デザインや読みやすさが好みのフォントを選ぶ
• プレビューの文字を、自分のブログっぽい文章に書き換えて雰囲気を確認する

M PLUS Rounded、Zen Kaku Gothic、Dela Gothic One、RocknRoll Oneあたりは、ブログでもよく使われる定番どころです。

本文用にするのか、見出しで使うのかを意識しながら選んでみてください。

headタグにフォントの読み込みコードを追加する

使いたいフォントが決まったら、Google Fontsが用意してくれる「読み込み用コード」をコピーします。

SWELLの場合は、テーマのファイルを直接触らなくても、カスタマイザーからheadタグにコードを差し込めるのが便利なところです。

• Google Fontsの画面で「Embed」や「<link>」と書かれたエリアから、linkタグのコードをコピーする
• WordPress管理画面で「外観」→「カスタマイズ」を開く
• 「高度な設定」などの項目から、「headタグ終了直前に出力するコード」といった入力欄を探す
• その欄に、さきほどコピーしたlinkタグをそのまま貼り付けて「公開」する

ここまでの作業で、サイト全体にフォントのデータが読み込まれるようになります。

ただ、この時点ではまだどこにもfont-familyを指定していないので、見た目は変わりません。

CSSで本文や見出しにフォントを適用する

読み込んだフォントを実際の文字に反映させるには、CSSで「この部分はこのフォントを使う」と指定してあげる必要があります。

SWELLなら、カスタマイザーの「追加CSS」に書くのがいちばん分かりやすいです。

• 「外観」→「カスタマイズ」→「追加CSS」を開く
• 本文全体に適用したい場合は、bodyに対してfont-familyを指定する
• 見出しだけ変えたい場合は、h2やh3など、変えたい見出しタグに対してfont-familyを書く

具体的なコードの形はフォントによって少し変わりますが、「読み込んだフォント名」と「適用したい場所」さえ分かっていれば、そこまで難しくありません。

慣れないうちは、「本文用のCSS」と「見出し用のCSS」をメモ帳などに分けて控えておくと、あとで修正するときも迷いにくくなります。

SWELL フォント おすすめと組み合わせパターン

迷ったらこれ！王道シンプルなフォントセット

まずは、「大きく外すことはないだろう」という王道セットからです。

パターン名	本文フォント	見出しフォント	向いているサイト
パターンA	Noto Sans系	同じNoto Sans系の太字	雑記ブログ、レビュー系
パターンB	Noto Sans系	Dela Gothic Oneなど太めのゴシック	アフィリエイト、特化ブログ
パターンC	游ゴシック系	Zen Kaku Gothicなどのゴシック	デザイン寄りのブログ

パターンAは、フォントの種類は変えずに、見出しだけ太字でメリハリをつける「超王道」の構成です。

パターンBは、本文は読みやすいNoto Sans系にしておいて、見出しだけ少し重めのフォントにすることで、アフィリエイト記事などのメリハリを作りやすいです。

パターンCは、少しこなれた雰囲気にしたいときに使いやすい組み合わせで、写真が多いブログとの相性もよいです。

女性向け・やわらかい雰囲気にしたいときのフォント

コスメ、暮らし、子育てなど、やわらかい世界観にしたいときは、丸みのあるゴシック体がよく合います。

• 本文：M PLUS Roundedのような丸ゴシック、または丸みのあるNoto Sans系
• 見出し：本文と同じフォントの太めウェイト、もしくは少しだけデザイン寄りの丸ゴシック

角ばったフォントより、写真の雰囲気にもなじみやすく、「なんとなく優しいブログだな」と感じてもらいやすいです。

ただし、太さを上げすぎると文字がつぶれて読みにくくなるので、本文は中くらいの太さ、見出しだけ一段階太くするくらいがちょうどよいと感じます。

ビジネス・オウンドメディア向けの落ち着いたフォント

企業ブログやBtoB寄りのオウンドメディアでは、遊びすぎないフォント選びが安心感につながります。

「ビジネスなら全部明朝体」というイメージを持たれがちですが、Web上ではゴシック体のほうが読みやすいことが多いです。

まずはゴシック体で土台を作り、強調したい部分やコラムだけ明朝体を使う、くらいのバランス感で考えると失敗しにくいと思います。

SWELL フォント変更で失敗しないための注意点

フォントを増やしすぎない・ウェイトを絞る

Webフォントは、種類や太さ（ウェイト）を増やせば増やすほど、読み込むデータ量も増えていきます。

ありがちなNGパターンと、おすすめの考え方を表にしました。

項目	NG例	おすすめの設定
フォントの種類	3種類以上のWebフォントを読み込む	基本は2種類までに絞る
ウェイト（太さ）	100〜900をすべて読み込む	本文用と見出し用など、2〜3段階に絞る
使う場所	サイト全体をすべてWebフォントにする	本文はシステムフォント、見出しだけWebフォントにする

読者は、細かい太さの違いまではそこまで気にしていません。

それよりも、「表示がサクサクかどうか」「文字がギュッと詰まり過ぎていないか」といった部分のほうが、体感として大きく響きます。

必要なフォントとウェイトだけに絞る、という意識を持っておくと安心です。

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

せっかくCSSを書いたのに、画面上でフォントが変わらないこともよくあります。

そんなときは、次のチェックリストを上から順番に確認してみてください。

焦って何度も書き換えるより、「スペル」「読み込み」「キャッシュ」「優先順位」の順で落ち着いて潰していくほうが、結果的に早く原因にたどり着けます。

SWELL フォント関連でよくある質問

Q1. SWELLでフォントをたくさん追加しても大丈夫？

A. 技術的には追加できますが、やりすぎはおすすめしません。

フォントの種類やウェイトが増えるほど読み込みが増え、ページ表示に時間がかかる可能性も高くなります。

目安としては、次のくらいを意識しておくと安心です。

• 本文用に1種類
• 見出し用に1種類
• ウェイトは2〜3段階に絞る

この範囲なら、見た目の変化も楽しみつつ、極端に重くなることも避けやすいです。

Q2. SWELLでフォントを変更するとSEOに悪影響がありますか？

A. フォントを変えたこと自体が、いきなりSEOを大きく下げることはあまりありません。

ただ、Webフォントを大量に読み込んでページが極端に重くなると、ユーザー体験が落ちてしまい、その結果として評価に影響する可能性はあります。

フォントの追加は、「読み込みの数を意識しながら、必要なものだけを使う」という感覚で調整してあげるとよいと思います。

Q3. SWELLのアップデートでフォント設定が変わってしまうことはありますか？

A. テーマのアップデートで、メニュー名や画面の見た目が少し変わることはありますが、フォント設定の基本的な考え方が急に変わることはあまりありません。

もし手元の画面と記事の説明が少し違っていても、次のような感じでたどっていけば、おおむね同じ場所に行き着けます。

• 「サイト全体設定」や「基本デザイン」といった名前のメニューを探す
• その中にある「フォント」「文字」などの項目を順番に開いていく

また、「追加CSS」に書いたfont-familyの指定は、アップデートで消えることは少ないので、子テーマやバックアップをうまく使いながら管理しておくと安心です。

まとめ：SWELLでフォントを変えて、自分らしいブログに育てよう

この記事のポイントを整理しておきます

今日できる最初の一歩としては、まずSWELLのカスタマイザーを開いて、標準フォントの中から「自分のブログに一番しっくりくるもの」をあらためて1つ選んでみてください。

そのうえで、スマホで記事を読みながら、本文の文字サイズや行間、見出しとのバランスを少しずつ調整していくと、読者にとっても自分にとっても心地よいブログに育っていきます。

慣れてきたら、この記事で紹介したようなフォントの追加やカスタマイズにもチャレンジして、SWELLのサイトを自分らしいデザインに仕上げていきましょう。