Cocoonのフォントを変更する方法【初心者も簡単】

ブログの文字がなんとなく読みにくい、Cocoonでフォントを変えたいけれど、どこをさわればいいのか分からない。そんなモヤモヤを抱えている人は多いと思います。

先に結論を一言でまとめると、「Cocoonの設定画面で全体のフォントを決めて、必要なところだけCSSでちょっと手を入れる」くらいが、見た目と表示速度のバランスも良くて続けやすい落としどころだと感じています。

Cocoonでフォント変更する前に知っておきたい基本

フォント変更で変わるのは「雰囲気」と「読みやすさ」

フォントは見た目だけでなく、読者の「読みやすさ」とブログ全体の空気感にもかなり大きく影響します。ざっくりですが、イメージとしてはこんな感じです。

項目	フォント変更前	フォント変更後のイメージ
ブログの印象	どこかで見たことがあるような、普通のデザイン	テーマに合った雰囲気が出て、「このブログ良さそう」と思われやすい
読みやすさ	文字が小さかったり行間が狭く、目が疲れやすい	文字サイズや行間もそろえて、スッと読める文章になる
滞在時間	途中で読むのをやめられやすい	最後まで読み進めてもらいやすくなる
ブログの個性	テーマ任せで、他サイトと似た印象になりがち	自分のブログらしい雰囲気が出て、記憶に残りやすい

私のブログも、デフォルトのまま放置していたころは「読みにくくはないけど、特に印象も残らない」という感じでした。フォントと行間を少し変えただけで、同じ文章なのにぐっと読みやすくなったので、想像以上に効果があるなと感じています。

Cocoonでフォントを変えるときの注意ポイント

とはいえ、フォント変更にのめり込みすぎると、かえって読みにくくなったり、表示が重くなったりもします。次のようなポイントだけ意識しておくと安心です。

「かっこいいから」「かわいいから」だけで選ぶと、本文が細すぎたり、文字同士が詰まりすぎたりして、長文を読むのがつらくなってしまいます。ブログ全体を通して、ストレスなく読み進められるかどうかを基準にしてみてください。

Cocoon標準機能でサイト全体のフォントを変更する方法

Cocoon設定「全体」からフォントを変える基本手順

もっともシンプルなやり方は、Cocoon設定の「全体」タブからフォントを選ぶ方法です。流れは次のとおりです。

これだけで、サイト全体のテキストに指定したフォントが反映されます。保存前にプレビュー画面を開いておき、別タブで見比べながら調整すると雰囲気がつかみやすいです。

Cocoon標準で選べるフォントのざっくり特徴

Cocoonには、あらかじめいくつかの日本語フォントやフォントの組み合わせが用意されています。細かい種類にこだわりすぎるより、まずは「どのタイプか」をざっと押さえておけば十分です。

フォントタイプ	種別	向いているブログの雰囲気
標準的なゴシック体	ゴシック体	IT・ビジネス・雑記など、幅広く無難に使える
游ゴシック系など	ゴシック体	すっきりした現代的な印象、文字数が多いブログ
日本語明朝体	明朝体	コラムや読み物系、落ち着いた雰囲気にしたいサイト
丸ゴシック系	丸ゴシック体	育児・暮らし・ハンドメイドなど、やさしい雰囲気のブログ

最初からマニアックなフォントを狙う必要はなく、こういった定番の中から選ぶだけでも、印象はかなり変わります。あとからCSSで部分的に変えることもできるので、まずは「全体の基準」として1つ決めてみてください。

スマホ表示も意識したフォントサイズと行間の目安

フォントを変えたら、セットで見直したいのが文字サイズと行間です。特にスマホでは、文字が小さすぎたり詰まりすぎたりすると、一気に読みづらくなってしまいます。

• PCの本文文字サイズ：16〜18px前後が目安
• スマホの本文文字サイズ：14〜16px前後が目安
• 行間：1.7〜1.9倍くらいの設定にすると読みやすい

Cocoon設定の「全体」タブには、「サイトフォント文字サイズ」や「モバイルサイトフォント」といった項目があります。数値を少しずつ変えながら、自分の目で見て一番読みやすいバランスを探してみてください。

ブログの雰囲気に合うフォントの選び方とおすすめ

ブログのジャンル別・おすすめフォント早見表

ブログのテーマによって、合うフォントのタイプはある程度変わってきます。ざっくりですが、次のように考えると選びやすいです。

ブログタイプ	合いやすいフォントの種類	出したい雰囲気
ビジネス・お金・ガジェット系	角ゴシック体	信頼感と読みやすさを両立させたいとき
コラム・エッセイ・小説系	明朝体	じっくり文章を読んでもらいたいとき
育児・暮らし・ハンドメイド系	丸ゴシック体	やわらかく、親しみやすい印象を出したいとき
雑記ブログ	標準的なゴシック体	クセが少なく、どんな記事にも合わせやすい

「おしゃれだから明朝体にしよう」のようにデザインだけで選ぶより、読者層や記事の内容をイメージして選ぶと、サイト全体の統一感が出ます。どうしても決めきれない場合は、まず無難なゴシック体を選んでおき、慣れてきてから少しずつ変えていくのがおすすめです。

私がやっているフォント選びの3ステップ

参考までに、私が新しいブログのCocoonフォントを決めるときの考え方をシェアします。

• まず、「何について書くブログか」「どんな人に読んでほしいか」をざっくりメモする
• Cocoonの標準フォントを3〜4種類試し、PCとスマホの両方で雰囲気を確認する
• 自分の記事を2〜3本読み返して、一番ストレスなく読めるフォントを選ぶ

このとき、本文と見出しで役割を分けるとバランスが取りやすいです。例えば、「本文はクセの少ないゴシック体」「見出しだけ少し個性のあるフォント」にすると、読みやすさを保ちつつ、ほどよくデザイン性も出せます。

CSSやGoogle Fontsで一歩進んだCocoonのフォント変更をする方法

サイトタイトルや見出しだけフォントを変更する

「本文は読みやすさ重視でシンプルに、サイトタイトルや見出しだけ雰囲気を変えたい」というときは、CSSで特定の要素だけフォントを変えます。流れは次のとおりです。

• WordPress管理画面で「外観」→「カスタマイズ」→「追加CSS」を開く
• サイトタイトルだけ変えたい場合は、「.site-title」などのクラスにfont-familyを指定する
• 見出しだけ変えたい場合は、「h2」「h3」などにfont-familyを指定する

Cocoonのスキンによってクラス名が少し違うことがあるので、ブラウザの検証ツールでサイトタイトルや見出し部分を右クリックし、「検証」からクラス名を確認しておくと安心です。いきなり全体ではなく、まずは見出しだけ変えてみると、変化が分かりやすくておすすめです。

Google Fontsを使っておしゃれなWebフォントにする

デザインにもっとこだわりたい場合は、Google Fontsの日本語フォントを使ってCocoonのフォントを変更する方法もあります。大まかな流れは次のようなイメージです。

• Google Fontsのサイトを開き、言語を「Japanese」に絞って日本語フォントを探す
• 使いたいフォントを選び、埋め込み用の<link>タグまたはCSSの記述をコピーする
• Cocoon設定の「アクセス解析・認証」タブなどにある「ヘッド用コード」欄に<link>タグを貼り付ける
• 追加CSSで「body」や「h2」などに対してfont-familyを指定する

ただし、日本語のWebフォントはファイルサイズが大きめで、読み込みに時間がかかることがあります。たくさんのフォントや太さを読み込むと、そのぶんページが重くなりやすいので、「本文用1種類＋見出し用1種類」くらいに絞るのが無難です。

部分的なフォント変更に便利な「追加CSSクラス」

ブロックエディタ（Gutenberg）を使っている場合、特定の段落だけフォントを変えたいときは、「追加CSSクラス」という機能が便利です。ちょっとした強調やアクセントに使えます。

• フォントを変えたい段落ブロックを選ぶ
• 右側の設定パネルから「高度な設定」→「追加CSSクラス」に、任意のクラス名（例：special-font）を入力する
• 追加CSS側で、「.special-font」に対してfont-familyなどを指定する

この方法なら、「プロフィールの一部だけ手書き風にする」「CTAの一文だけ雰囲気を変える」など、ピンポイントでフォント変更ができます。全体をいじるよりリスクが小さいので、まずはここから試すのもありです。

フォント変更でよくあるトラブルとチェックリスト

フォント変更が反映されないときのチェック表

まずは、次のチェック表に沿って原因を探してみてください。

チェック項目	確認ポイント	対処のヒント
保存ボタンを押したか	「変更をまとめて保存」を押し忘れていないか	念のためもう一度保存し、完了メッセージを確認する
キャッシュの影響	ブラウザやキャッシュ系プラグインが有効になっていないか	シークレットウィンドウや別ブラウザ、別端末で確認する
テーマやスキンの上書き	スキン独自のCSSが優先されていないか	一度別のスキンに変えてみて挙動を比べる
CSSの優先度	独自CSSよりCocoon設定のほうが強く効いていないか	必要に応じてfont-familyに「!important」を付ける

特に、キャッシュ系プラグインを使っている場合は、変更が反映されるまでタイムラグがあることがよくあります。また、Cocoon側でサイトフォントを指定した状態だと、独自CSSのfont-familyが期待どおり効かないケースもあるので、「指定なし」にしてからCSSで指定する方法も頭に入れておくと便利です。

表示が崩れた・スマホだけフォントが違うとき

PCでは問題なく見えるのに、スマホだけフォントが違って見えたり、行間がおかしく感じたりすることもあります。これには次のような理由が考えられます。

• OSごとに利用できる標準フォントが違う（Windows・Mac・Android・iOSなど）
• 指定したフォントが端末に入っておらず、別の代替フォントで表示されている
• 画面の幅が狭くなったことで、行間や余白のバランスが変わっている

すべての端末でまったく同じ見え方にそろえるのは現実的に難しいので、「読めるかどうか」「窮屈すぎないか」といった実用面を優先して調整していくのがおすすめです。実機やブラウザのスマホ表示モードで確認しながら、少しずつ整えていきましょう。

フォントと表示速度・SEOの関係も軽く押さえておこう

Webフォントを増やしすぎるとサイトが重くなる

Google FontsなどのWebフォントは便利ですが、多用すると読み込むデータ量が増え、ページの表示が遅くなりやすくなります。特に、日本語フォントはファイルサイズが大きめです。

• 読み込むフォントの種類は、できれば2種類程度に抑える
• 太さ（weight）は、本当に使うものだけ読み込む
• 本文用と見出し用で役割を分け、最小限の構成にする

オシャレなフォントをたくさん使うより、「シンプルだけど軽くて読みやすい」ほうが、読者にも検索エンジンにも優しいサイトになります。見た目と軽さのバランスを意識してみてください。

読みやすいフォントは間接的にSEOにもプラス

フォントを変えたからといって、直接検索順位が上がるわけではありません。ただ、読みやすいフォントにすることで、次のような良い変化が期待できます。

検索エンジンは、こうしたユーザーの行動も含めてページを評価していると考えられています。Cocoonでのフォント変更は、デザインだけでなく「最後まで読まれる記事づくり」の一部だと思って取り組むと、モチベーションも上がります。

よくある質問（Cocoonのフォント変更Q&A）

Q1.Cocoonのフォント変更は初心者がやっても大丈夫？

A. はい、Cocoonの標準設定だけであれば、初心者の方でも十分安全に操作できます。Cocoon設定の「全体」タブからサイトフォントを選び、「変更をまとめて保存」を押すだけなので、テーマファイルを直接編集する必要はありません。

心配な場合は、変更前に現在の設定をスクリーンショットやメモで残しておきましょう。「いじってみて違和感があれば元に戻す」というスタンスなら、怖がりすぎなくて大丈夫です。

Q2.CSSでCocoonのフォントを変更するとき、失敗しにくいコツは？

A. いきなり全体のフォントをCSSで上書きするのではなく、「見出しだけ」「サイトタイトルだけ」といった狭い範囲から試すのがおすすめです。追加CSSに少しずつコードを足して、そのたびに表示をチェックする癖をつけると、もしレイアウトが崩れても原因を特定しやすくなります。

また、Cocoon設定側でサイトフォントを指定しているとCSSが思った通り効かないことがあるので、「CSSで細かく調整したい部分はCocoon側は指定なしにする」といった役割分担を意識するとスムーズです。

Q3.Cocoonのフォント変更をしたあと、元のフォントに戻すことはできますか？

A. 戻せます。Cocoon設定の「サイトフォント」を初期値に戻すか、「指定なし」に設定すると、テーマや端末の標準フォントに近い状態に戻ります。

CSSで独自にfont-familyを指定していた場合は、その記述を削除して保存すれば、変更前のフォントに戻ります。大きく失敗したと感じたときは、いったん元に戻してから、少しずつやり直していくと安心です。

まとめと今日からできる最初の一歩

ここまでの要点を振り返ります

今日からできる最初の一歩としては、まずCocoon設定の「全体」タブを開き、サイトフォントを2〜3種類試しながら、自分のブログに一番しっくりくるものを探してみてください。

そのうえで、「見出しだけCSSで変えてみる」「スマホの文字サイズを少し大きくする」といった小さな変更を積み重ねていくと、無理なく読みやすいブログに育っていきます。焦らず少しずつ、自分らしいフォントに整えていきましょう。