Cocoonのフォントを変更する方法｜初心者向けに設定画面を画像つきで解説

「Cocoonのフォントってどこで変えるの？」「どのフォントを選べばいいかわからない」

ブログを始めたばかりのころ、私もそう思っていた。

結論から言うと、Cocoon設定の「全体」タブから数クリックで変更できる。コードは一切不要だ。

この記事では、実際の設定画面のスクショをもとに、フォントの変更手順と各フォントの特徴を解説する。Puglightyearで使っている設定もそのまま公開するので、参考にしてほしい。

📋 この記事でわかること

Cocoonのフォント設定画面を開く

まず設定画面までの道順を確認しよう。

フォントのドロップダウンをクリックすると選択肢が表示される。Cocoonで選べるフォントは以下の5種類だ。

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

WEBフォントはGoogleのサーバーから読み込むため、どのデバイスでも同じ見た目になる。その分、ページ読み込みがわずかに遅くなる。システムフォントは端末に入っているフォントを使うので高速だが、端末によって見た目が変わる場合がある。

副業・ブログ・ノウハウ系のサイトならNoto Sans JPが一番無難でおすすめだ。理由は3つある。

PuglightyearでもNoto Sans JP（WEBフォント）を使っている。

フォントの下に「文字サイズ」と「文字の太さ」の設定がある。

設定できる項目は2つだ。

📐 Puglightyearの設定値

項目	設定値	目安
PC文字サイズ	18px	16〜18pxが読みやすい
モバイル文字サイズ	16px	15〜16pxが目安

100（細い）〜900（太い）のスライダーで指定できる。一般的な本文の太さは400が標準だ。

⚠️ フォントによっては細かく太さを設定できないものもある。設定しても見た目が変わらない場合は、そのフォントが対応していない太さの可能性がある。右側のフォントプレビューで確認しながら調整しよう。

設定を変更したら、画面下部（または上部）の「変更をまとめて保存」をクリックして保存しよう。

⚠️ 保存後すぐに反映されない場合：
ブラウザのキャッシュが残っている可能性がある。Ctrl＋Shift＋R（Mac：Command＋Shift＋R）でキャッシュをクリアしてから確認しよう。

Cocoonのフォント設定をまとめる。

フォントはブログの第一印象を左右する。最初はNoto Sans JP・18px・太さ400に設定しておいて、慣れてきたら少しずつ調整してみよう。

Cocoon設定→「全体」タブを開き、「サイトフォント」のドロップダウンから「Noto Sans JP（WEBフォント）」を選択して「変更をまとめて保存」をクリックします。

PC表示は16〜18px、モバイル表示は15〜16pxが読みやすい目安です。PuglightyearではPC 18px、モバイル 16pxに設定しています。

「変更をまとめて保存」をクリックしたか確認してください。保存済みでも反映されない場合は、ブラウザのキャッシュが残っている可能性があります。Ctrl＋Shift＋R（Mac：Command＋Shift＋R）でキャッシュをクリアしてから確認してみてください。

わずかに読み込み時間が増えますが、通常の副業ブログであれば体感できるほどの差はありません。見た目の統一感を優先してWEBフォントを選ぶので十分です。

📌 Cocoon設定をさらに進める方はこちら