Cocoon標準フォントの特徴と設定方法｜初心者向けに一覧で解説

Cocoon で ブログ を始めたけれど、
「フォントはどれを選べばいいの？」「設定方法がよく分からない・・・」
・・・と悩んでいませんか？

こんにちは！そらまめです。

Cocoonには、標準で使えるフォントが豊富に用意されており、設定を少し変えるだけでブログの見やすさや印象を大きく改善できます。

この記事では、Cocoon標準フォントの種類や特徴、初心者でもできるフォント設定手順を、実際の見えかたや注意点とあわせてまとめていきます。

Cocoonで使えるフォントの基本

 Cocoon標準フォントとは？

Cocoonには、WordPress標準のフォントに加えて、Google FontsやWebフォントを簡単に選べる機能があります。
ブログ全体のフォントを変更すると、読みやすさやブログの印象が大きく変わります。

Cocoonには、最初からいくつかのフォントが用意されています。

フォント一覧を見ると、1つだけ表示されているものと、2つのフォント名が並んでいるものがあります。

2つのフォントが並んでいるのは、「使っている端末やOSでフォントが使えなかった場合、代わりにこちらを表示します」という意味です。

Windows・Mac・Androidなど、閲覧環境によって表示できるフォントが違うため、「Aのフォントが見られない場合、Bのフォントを表示するね！」という感じで複数のフォントが指定されているわけです。

 Cocoon標準フォントを深堀り

1. OS依存のフォント（環境によって表示が変わる）

次の４つのフォントは、使用しているOSによって表示されないことがあります。

• ヒラギノ角ゴ → Mac/iOS専用（Windowsでは表示されない）
• 游ゴシック体 → Macでは標準、Windows 8.1以降は対応（それ以前のWindowsでは表示されない）
• MSPゴシック → Windows専用
• メイリオ（Meiryo）→ Windows標準フォント（Mac・スマホでは別フォントに置き換わる）

このようなフォントは「環境依存フォント」と呼ばれ、見る人のOSによって文字の見た目が変わる可能性があります。

2. OS非依存・Webフォント対応（どの環境でも同じ表示）

Webフォントは、OSに関係なく同じフォントが表示されるため、ブログでは安心して使えるフォントです。

• Noto Sans JP → Google Fonts対応（ゴシック体）
• Noto Serif JP → Google Fonts対応（明朝体）
• Mplus 1p / Rounded Mplus 1c → Google Fonts対応（丸ゴシック系）
• 小杉ゴシック / 小杉丸ゴシック / さわらびゴシック / さわらび明朝 → Cocoonに最初から組み込み済みのWebフォント

PCとスマホで別々に設定できる

Cocoonでは、PCとスマホで文字サイズや文字の太さを別々に設定できます。
そのため、スマホでも読みやすいデザインを作ることが可能です。

フォント変更が与えるブログの印象

同じ文章でもどのフォントを使うかによって、ブログの印象は変化します。

• ゴシック系：すっきり・現代的
• 丸文字系：やさしい・親しみやすい
• 明朝系：上品・読み物向き

フォント一覧と特徴

Cocoonに元々備わってるフォントは次の１２個です。

僕が使用しているOSはWindowsなので、Windows目線の記録となります。

Cocoonの初期設定で使われているフォントです。
Windowsでは「ヒラギノ角ゴ」が使えないため、メイリオ で表示されてます。

MacやiPhoneで閲覧すると、Windowsとは異なり ヒラギノ角ゴ で表示されます。
そのため、OSによって文字の印象が少し変わる点には注意が必要です。

２．メイリオ、ヒラギノ角ゴ

Windowsでは メイリオ が表示されます。
Mac/iPhoneでは、ヒラギノ角ゴが適用されます。

• さわらび明朝の印象
  • 線の強弱がハッキリしている
  • 文字に少し丸みがある

Cocoonでフォントを設定する手順

ここからは、フォントを設定する手順を見ていきます。

• WordPress管理画面 → Cocoon設定 → 全体
  ・
• 「サイトフォント」を選択
  ・
• PCとスマホで別々に設定する場合は、それぞれ指定

ひとつずつ見ていきます。

WordPress管理画面から設定

画面左側のダッシュボードを見てみます。
赤い四角の中に注目してみましょう。

ダッシュボードのCocoon設定から、全体を選択します。

デスクトップ（パソコン）とスマホ、それぞれ詳細に設定します。

フォントを選ぶ時の注意点

Webフォントと表示速度の関係

Google Fonts などの Webフォントは、読み込みが発生するためページの表示速度に影響することがあります。

必要に応じて、本文はシステムフォント、見出しは Webフォントといった使い分けをしましょう。
ただし、その場合は追加 CSS の調整が必要になります。

丸文字系フォントは強調に向く

丸文字系フォントは、本文全体に使用すると読みやすさが下がることがあります。

一方で、見出しやポイントの強調に使うと、可愛らしい印象を与えられるため、アクセントとしての使用がおすすめです。

全体の統一感を意識する

複数のフォントを乱用すると、デザインにまとまりがなくなります。
2〜3種類以内に抑えて組み合わせると、全体のバランスが良くなります。

まとめ｜Cocoon標準フォントの特徴と使いかた

Cocoonの標準フォントは種類が豊富で、フォントを変えるだけでもブログの印象を大きく変えられます。
見出しと本文でフォントをうまく組み合わせることで、可読性とデザイン性の両立も可能です。

また、Cocoonは設定画面が分かりやすいため、初心者でも簡単にフォント変更ができます。
スクリーンショットや手順に沿って進めれば、迷うことはほとんどありません。

大切なのは、見やすさを最優先しつつ、ブログの雰囲気に合ったフォントを選ぶこと。
見やすさとデザインのバランスを意識して、自分のブログに合ったフォント設定を見つけましょう！