SWELL Googleフォント設定ガイド。Webフォントの速度問題も解説
こんにちは。hakubi code 代表のてらだです。
WordPressテーマSWELLでサイトを立ち上げた時、フォント設定ってどうしてますか？
SWELLでWebフォントを使って、サイトデザインを良くしたいですよね。特に代表的なGoogleフォント（Noto Sans JPなど）のカスタマイザーでの設定はどうすべきか。Noto Sans JPのままでいいのか、明朝体はどうなのか、迷うかもしれません。
また、他のサイトで見かけるようなカッコいい見出しフォントを追加したくても、SWELLの選択肢にはないし、どう設定するのか。かといって、Googleフォントはサイトが遅くなるという話も聞くし、SEOへの影響も心配です。
この記事では、そんなSWELLのGoogleフォント（Webフォント）に関する疑問に答えます。SWELLの基本的なフォント設定の考え方から、表示速度への影響、そして「フォントが反映されない」といったよくあるトラブルの解決策まで、分かりやすく解説していきます。
- SWELL標準フォント（Noto Sans JPなど）の正しい選び方
- 「Webフォント」と「Googleフォント」の違いと基本設定
- 応用として他のGoogleフォントを追加する際の注意点
- フォントが反映されない時の確実な対処法
SWELL Googleフォントの基本設定
まずはSWELLの基本機能からおさらいしましょう。SWELLはあえて設定をシンプルにすることで、誰でも迷わず美しいサイトを作れるようになっています。フォントもその一つですね。
そもそも「Webフォント」とは？
SWELLでおしゃれなフォントを使いたいけど、「Webフォント」を使えばよいのかな？「Googleフォント」とはどう違うの？といったユーザーの疑問に答えますね。
「Webフォント」とは、訪問者のPCやスマホに入っているフォント（これをシステムフォントと言います）ではなく、サーバーからフォントファイルをダウンロードして表示する技術のことです。サイト制作者の意図したデザイン（例：インパクトのある太い文字）で表示できるのが最大のメリットです。
そして「Googleフォント」は、このWebフォントを無料で提供している代表的なサービスの一つです。つまり、「Webフォント ⊃ Googleフォント」という関係性ですね。
SWELLは、その中でも特に高品質な「Noto Sans JP」や「Noto Serif JP」（これらもGoogleフォントです）を、カスタマイザーから簡単に使えるように標準搭載してくれています。
この記事では、SWELLでのWebフォント戦略として、この「Googleフォント」をいかに最適に扱うかに焦点を当てて解説していきます。
カスタマイザーでの設定方法
SWELLのフォント設定は、カスタマイザーのすごく分かりやすい場所にあります。
- WordPressのダッシュボード（管理画面）にログインします。
- 左側メニューの「外観」もしくは上部バーから「カスタマイズ」をクリック。
- 「サイト全体設定」 > 「基本デザイン」>「■フォント設定」に進みます。
ここで設定できるのは、「サイト全体の基本フォント」です。SWELLでは、見出しと本文のフォントを別々に選ぶ機能はなく、サイト全体で1つのベースフォントを指定する、というシンプルな仕様になっています。
選べる選択肢は、以下の通りです。
- 游ゴシック（デフォルト）
- ヒラギノゴシック・メイリオ（Mac/Winの標準フォント）
- Noto Sans JP（Googleフォント / Webフォント）
- 明朝体（Noto Serif JP）（Googleフォント / Webフォント）
（SWELLのバージョンアップにより、変更される可能性はあります）
プレビューを見ながら、自分のサイトの雰囲気に合うものを選んで「公開」を押すだけ。簡単ですね。
おすすめ日本語フォント7選
「え、SWELLって4種類くらいしか選べないんじゃ…？」と思いましたよね。その通りです。
SWELLのカスタマイザーから“標準で”選べるのは、前の項目で挙げた基本的なフォントだけです。
でも、デザインにこだわりたい場合、それだけじゃ物足りない時もあります。ここでは、SWELLの基本フォントに「加えて」、応用テクニック（追加CSSなど）を使えば実装できる、私のおすすめGoogleフォントを紹介します。
あくまで「応用編」ですよ！
これから紹介するフォントは、SWELLのドロップダウンリストにはありません。実装するにはCSSの知識が少し必要になるので、「標準機能じゃ物足りない！」という方だけ参考にしてみてください。
| フォント名 | 分類 | デザインの印象 | 推奨用途 |
|---|---|---|---|
| Noto Sans JP | ゴシック体 | 堅実、標準、最高レベルの可読性 | 基本（標準で選べる） |
| M PLUS 1p | ゴシック体 | モダン、柔らかい、親しみやすい | 本文向き（応用） |
| Zen Kaku Gothic New | ゴシック体 | シャープ、現代的、クリア | 本文・見出し（応用） |
| Dela Gothic One | デザイン系 | 極太、インパクト大、力強い | 見出し専用（応用） |
| Zen Kaku Gothic Antique | デザイン系 | ユニーク、レトロモダン、個性的 | 見出し向き（応用） |
| Yusei Magic | デザイン系 | 手書き風、親しみやすい、カジュアル | 見出し向き（応用） |
| RocknRoll One | デザイン系 | ポップ、エネルギッシュ | 見出し向き（応用） |
もし「Dela Gothic One」などを使いたくなったら、次の「追加CSS」の項目が参考になるかと思います。
見出しと本文のおすすめ組み合わせ
SWELLは基本フォントが1種類しか選べません。でも、CSSを使えば「本文は基本フォントのまま、見出し（h2タグとか）だけ別のフォントにする」という高度なカスタマイズが可能です。
パターン1：王道・堅実（SWELL標準）
- サイト基本フォント: Noto Sans JP
- 特徴: SWELLの標準機能で完結する、最もシンプルで読みやすい構成です。見出しは自動的に太字（Bold）になるので、本文（Regular）と自然なメリハリがつきます。SEO（速度）的にも安心。
パターン2：メリハリ・インパクト（要追加CSS）
- サイト基本フォント: Noto Sans JP
- 見出し（h2, h3）だけ: Dela Gothic One（追加CSSで指定）
- 特徴: 本文の読みやすさ（Noto Sans JP）と、見出しの強烈なインパクト（Dela Gothic One）を両立できます。SWELLユーザーにも人気のあるカスタマイズですね。
Noto Sans JPは設定すべき？
SWELLの選択肢にある「Noto Sans JP」、これはGoogleが開発したフォントで、日本語Webフォントの「事実上のスタンダード」とも言える存在です。
メリットは、クセがなく、どのデバイスで見てもキレイで圧倒的に読みやすいこと。迷ったら「Noto Sans JP」を選んでおけば、デザイン的にも可読性的にも大きな失敗はありません。
デメリットは、Googleフォント（外部ファイル）であるため、厳密には「游ゴシック」などのシステムフォント（デバイス内蔵フォント）に比べて、ほんのわずかに読み込み速度が遅くなる可能性があることです。
とはいえ、SWELLは「Noto Sans JP」が最適に読み込まれるよう調整してくれています。「読みやすさとデザインのバランスを考えたら、Noto Sans JPは最良の選択肢の一つ」というのが私の見解です。速度への影響も、次の章で解説する「ローカル化」をしない限り、微々たる差かなと思います。
追加CSSでの個別指定テクニック（画像解説）
「見出しだけDela Gothic Oneにしたい！」というような、SWELLの標準機能にないカスタマイズは、「追加CSS」機能を使います。
（場所：カスタマイザーの一番下にある「追加CSS」）
ここにCSSコードを書くことで、SWELLのデフォルト設定を上書きできます。例えば、「Dela Gothic One」を読み込んで、見出し(h2)に適用する手順は以下の通りです。
@importコードの取得手順（画像解説）
- まず、Google Fontsの公式サイトにアクセスします。
- 検索窓（)）に、使いたいフォント名（例: dela）を入力して、フォント（Dela Gothic One）を見つけます。
- 右側にある「Get font」ボタン（）をクリックします。
- 次に「Get embed code」ボタン（）をクリックします。
- コードが表示されたら、
<link>と@importの選択肢があるので、@import（）を選択します。 - 表示されたコードをコピーします。
追加CSSへの記述
カスタマイザーの「追加CSS」を開き、一番上（先頭）に、先ほどコピーした @import のコードを貼り付けます。
続けて、そのフォントをどの要素に適用したいかを指定するCSSも書きます。
※このとき、「<style>」と「</style>」は省いてください！
/* まず使いたいGoogleフォントを読み込む（<style>タグと</style>閉じタグは不要！） */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
/* 記事の見出し(h2)にだけ、そのフォントを適用する */
h2 { font-family: 'Dela Gothic One', sans-serif; } 
反映されたことが確認できたかと思います！
@importでの読み込みは注意！
この @import という方法は、手軽にGoogleフォントを追加できますが、ページの表示速度を低下させる（レンダリングブロック）原因になりやすいです。つまり、PSIスコアに悪影響が出る可能性があります。
この方法は、Googleフォントだけでなく、「Adobe Fonts」など他のWebフォントサービスを使いたい場合も基本は同じですが、有料だったり、読み込み設定がさらに複雑で、サイトが遅くなるリスクも高くなりがちです。
まずはSWELLと親和性の高いGoogleフォントを最適化するのが、最も現実的で安全な戦略だと私は考えています。
SWELL Googleフォントと速度最適化
デザインのためにGoogleフォント（Noto Sans JPや、追加したフォント）を使うと、どうしても気になるのが「サイトの表示速度」ですよね。SEOを考えるなら避けては通れません。
フォントが遅い原因とPSI対策
なぜGoogleフォントを使うと（少し）遅くなるのか。それは、訪問者のブラウザが「外部のサーバー（Googleのサーバー）」にフォントファイルを取りに行く必要があるからです。
この「外部との通信」が、ページの表示をほんの少し遅らせる（レンダリングブロック）原因になります。これが、PageSpeed Insights (PSI) で「レンダリングを妨げるリソースの除外」という警告として表示されることがある理由です。
SWELL標準の「Noto Sans JP」はかなり最適化されていますが、@importなどでWebフォントを無計画にどんどん追加していくと、この遅延が積み重なって、Core Web Vitalsのスコア（特にLCP）に悪影響を与える可能性があります。
高速化するローカル化とは？
この速度問題を根本的に解決する高度なテクニックとして「フォントのローカル化」というものがあります。
これは、Googleのサーバーからフォントを読み込むのをやめて、フォントファイル自体を自分のサーバー（SWELLが置いてあるサーバー）に保存し、そこから読み込む技術のこと。
外部への通信がなくなるので、理論上は表示が速くなり、PSIスコアの改善も期待できます。
ローカル化のメリット
- 外部リクエストがゼロになり、接続遅延がなくなる。
- PSIの「レンダリングを妨げるリソース」警告が解消されやすい。
「じゃあ、みんなやればいいじゃん！」と思うかもですが、これ、結構ハードルが高いんです…。
OMGFを使ったローカル化の手順
この「ローカル化」を自動でやってくれるプラグインとして、「OMGF (Optimize My Google Fonts)」というものが有名です。
OMGFは、サイトが使っているGoogleフォントを検出して、自動でサーバーにダウンロードし、読み込み先をローカルに変更してくれる便利なやつです。
…と、聞くと良さそうなんですが、私は大半のSWELLユーザーに積極的なおすすめはしていません。
なぜなら、設定がかなり専門的で、SWELL独自のフォント読み込み機能と競合して失敗しやすいからです。
ローカル化の落とし穴
設定を間違えると、SWELLが読み込むGoogleフォント（CDN版）と、OMGFが読み込むフォント（ローカル版）が「二重読み込み」状態になって、サイトが逆にめちゃくちゃ遅くなる危険性もあります。
また、SWELLのアップデートで仕様が変わった時に、動かなくなるリスクもゼロではありません。
CSSやWordPressの仕組みにかなり詳しい人か、専門家に依頼できる人以外は、下手に手を出さない方が安全かな、というのが私の正直な意見です。
フォントが反映されない時の対処法
「カスタマイザーでフォントを変えたのに、サイトに反映されない！」というトラブル、これは本当によくあります。
でも、原因はだいたい決まっています。慌てずに、以下をチェックしてみてください。
- キャッシュ（9割これ）: 古いCSSが残ってるだけ。
- 追加CSSの記述ミス:
@importの位置が間違っている、など。 - プラグインの競合: 他の高速化プラグインなどが邪魔をしている。
- 設定箇所のミス: SWELLは基本フォント1つなので、これは少ないかもですね。
CSSが反映されない全般的な問題については、hakubi codeの別記事でも詳しく解説しているので、心当たりがある方はそちらも参考にしてみてください。
キャッシュが原因で反映されない？
フォント設定が反映されない原因として、とても多いのが「キャッシュ」です。
あなたのブラウザやサーバーに、フォント設定を変更する「前」の古いCSSファイルが保存されていて、それが表示され続けている状態ですね。
この場合、以下の「キャッシュ」を上から順番に、すべてクリアする必要があります。
クリアすべきキャッシュの種類
- ブラウザキャッシュ まずはあなたのPCやスマホのブラウザキャッシュです。（Windows:
Ctrl + Shift + R/ Mac:Cmd + Shift + Rで強制リロード！） - SWELL独自のキャッシュ 管理画面の上部バーにある「SWELL設定」メニューから「キャッシュクリア」を実行します。
- キャッシュプラグインのキャッシュ 「WP Rocket」など、高速化プラグインを使っている場合は、そのプラグインの管理画面からもキャッシュを削除します。
- サーバーキャッシュ ConoHa WINGやXserverなど、レンタルサーバー側が提供しているキャッシュ機能です。サーバーの管理パネルからクリアします。
これら全部をクリアして、シークレットウィンドウで確認すれば、だいたい反映されるはずですよ。
SWELL Googleフォント総まとめ
お疲れ様でした。SWELLのGoogleフォント（Webフォント）について、基本的な考え方から応用まで解説しました。
私の結論としては、こんな感じです。
戦略A：シンプル・速度・安定重視（大半の人におすすめ） SWELLのカスタマイザーで「Noto Sans JP」を選ぶ。これだけで十分読みやすく、SEO的にも大きな問題はありません。
戦略B：デザインにこだわりたい（中〜上級者向け） 基本は「Noto Sans JP」にしておき、「追加CSS」を使って「見出しだけ」別のGoogleフォント（Dela Gothic Oneなど）を指定する。ただし、@importによる速度低下のリスクは少し覚悟する。
戦略C：デザインも速度も究極にこだわる（専門家向け） 追加CSSでフォントを指定した上で、OMGFなどを使って「ローカル化」に挑戦する。ただし、失敗するリスクも高いので、専門知識がない場合は無理しないこと。
まずはSWELLの標準機能である「Noto Sans JP」をベースに考えるのが、一番堅実で、SWELLの良さを活かせる使い方かなと思います！