SWELLでサイト全体のフォントを変更する方法｜読みやすい選び方

2026年10月26日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

ブログの文字を、もっと読みやすく、おしゃれなフォントに変えたいと思っていませんか。私は上品な雰囲気にしたくて明朝体を選んだところ、スマホで見ると文字が細くて読みにくくなってしまった経験があります。

この記事では、SWELLでサイト全体のフォントを変更する方法を、設定画面の名前まで具体的に初心者向けに解説します。実際の失敗談も交えるので、読みながら進めれば、読みやすさと雰囲気を両立したフォントを選べます。

※ブログの作業環境を見直したい方へ：筆者が記事作成に使っているMacBook Air M5は、軽くて持ち運びやすく、デザインの調整や記事作りを快適にこなせるノートPCです。

➡️ AmazonでMacBook Air M5の最新価格を見る

価格は変動するため、最新の情報はAmazonの商品ページでご確認ください。

ニャフィ

ブログのフォントって、どこで変えられるのかにゃ？

たいがブログ

フォントが変わると、ブログの印象もがらりと変わりますよね。

ニャフィ

どのフォントを選べばいいのかも迷うにゃ…

たいがブログ

選び方のコツと手順を、5つのステップで解説しますね。

▼あわせて読みたい：フォントや画像の読み込みを速くするサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLで変更できるフォントの種類

SWELLでは、カスタマイザーからサイト全体のフォントを選ぶだけで変更できます。コードを書く必要はなく、プレビューで見え方を確かめながら選べるのが便利です。

筆者はCocoonを使っていたころ、フォントの選択肢が多すぎて決めきれませんでした。SWELLはブログで読みやすいフォントに絞られているので、迷わず選べて時間の節約になっています。

ゴシック体と明朝体から選べる

SWELLでは、游ゴシック・ヒラギノゴシック・Noto Sans JPなどのゴシック体と、明朝体から選べます。ブログの読みやすさを重視するなら、ゴシック体がおすすめです。

Noto系のフォントは読み込みに時間がかかる

Noto Sans JPなどのNoto系フォントは、外部からフォントを読み込むため、表示が少し遅くなることがあります。速さを重視するなら、端末に入っているフォントを選びましょう。

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

フォントは、カスタマイザーの「サイト全体設定」→「基本デザイン」から変更します。あわせて文字サイズも調整すると、より読みやすいブログに仕上がります。

筆者が明朝体で失敗したのは、パソコンの画面だけで決めてしまったからでした。フォントは、スマホで実際に読んでみてから決めることが大切です。

読みやすさを最優先に選ぶ

ブログは長い文章を読んでもらう場所なので、おしゃれさより読みやすさを優先しましょう。文字がはっきり見えるゴシック体なら、スマホでも疲れにくくなります。

文字サイズもあわせて調整する

フォントを変えたら、文字サイズも見直しましょう。SWELLではパソコンとスマホで別々に調整できるので、それぞれの画面で読みやすい大きさにできます。

STEP

カスタマイザーを開く

WordPressの管理画面から「外観」→「カスタマイズ」を開きます。右側のプレビューには、文章の多い記事ページを表示しておくと見比べやすいです。

STEP

基本デザインの設定を開く

メニューから「サイト全体設定」→「基本デザイン」を選びます。ここにフォントや文字サイズの設定項目がまとまっています。

STEP

サイト全体のフォントを選ぶ

フォントの項目から、使いたいフォントを選びます。筆者はNoto Sans JPに変えたときスマホの表示がわずかに遅く感じたので、変更後は速度も確認しましょう。

STEP

文字サイズを調整する

パソコンとスマホそれぞれの文字サイズを調整します。スマホでは小さすぎると読みにくいので、少し大きめを意識すると読者にやさしい表示になります。

STEP

スマホで読んで確認してから公開する

プレビューで確認したら「公開」を押し、実際のスマホで記事を読んでみます。長い文章でも疲れずに読めるかを確かめておくと安心です。

フォントをもっと読みやすくするコツ

フォントを選んだら、文字の間隔や使い方にも気を配ると、さらに読みやすいブログになります。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者は記事の読み直しを、アイケア機能のある23.8インチの外部モニターで行っています。長い文章を読んでも目が疲れにくく、読みにくい部分に気づきやすくなったと感じています。

文字や行の間隔を整える

同じフォントでも、文字と文字の間や行の間隔によって読みやすさは大きく変わります。詰まりすぎていると感じたら、少しゆとりを持たせるだけで印象がやわらかくなります。

部分的にフォントを変えすぎない

見出しや装飾ごとにフォントを変えると、記事全体がちぐはぐな印象になります。強調したい部分は太字やマーカーを使い、フォントはサイト全体でそろえましょう。

読みやすいフォント設定のチェックポイント

スマホで長い文章を読んでも疲れない
文字サイズがスマホで小さすぎない
フォントがサイト全体でそろっている
変更後に表示速度を確認している

▼あわせて読みたい：長時間の読み直しでも目が疲れにくい、筆者愛用の作業用モニターはこちらで紹介しています。

よくある質問

初心者におすすめのフォントはどれですか？: 迷ったら游ゴシックがおすすめです。端末に入っているフォントなので表示が速く、パソコンでもスマホでも読みやすく表示されます。
Google Fontsの好きなフォントを使えますか？: 使えますが、CSSの追加など専門的な作業が必要です。表示速度にも影響しやすいので、初心者のうちはSWELLで選べるフォントを使うのが安心です。
フォントを変えたのに反映されません。: 「公開」を押したか確認したうえで、キャッシュを削除してみてください。「WP Fastest Cache」などを使っていると、古い表示が残っていることがあります。
明朝体はブログに向いていませんか？: 上品な雰囲気を出したいブログには向いています。ただしスマホでは細く見えやすいので、文字サイズを大きめにして読みやすさを確認しましょう。