Windows 10のPCで見ると綺麗なゴシック体なのに、iPhoneでブログを表示すると、ブログタイトルと本文だけが、なぜか古い印象の「明朝体」になってしまう――。
当教室のブログ（WordPressテーマ：Cocoon）で、このような現象が発生しました。
当初はCSSで強制的に上書きすることで対処していましたが、読者様からの貴重なご指摘により、真の原因と根本的な解決方法が判明しました。
同じ悩みをお持ちのConoHaユーザーの方は、まずこちらをご確認ください。
■ 判明した原因と根本的な解決方法
結論から申し上げます。
原因は、レンタルサーバー ConoHa で自動インストールされる、以下のプラグインでした。
TypeSquare Webfonts for ConoHa
このプラグインが有効になっていると、特定のWebフォント（TBUDゴシック R など）を強制指定する命令が割り込み、iPhoneなどのiOS環境において、サイト側（Cocoon）のフォント設定を無視して「明朝体」で表示されてしまう挙動が確認されました。
■ 解決手順
- WordPress管理画面から「プラグイン」を開く
- 「TypeSquare Webfonts for ConoHa」を無効化（または削除）する
- ブラウザのキャッシュをクリアして表示を確認する
これだけで、CSSを一行も書かずに、Cocoon本来のフォント設定が正しく反映されるようになります。
■ 発生していた現象（検証記録）
当初、Cocoonの設定画面からフォント（游ゴシックや Noto Sans JP）を選択していましたが、iPhone（iOS 26.x）のSafariおよびChromeでは、ブログタイトルと本文のみが明朝体で表示される状態でした。
興味深いことに、Safariの「リーダー表示」を有効にすると正常なゴシック体で表示されますが、通常のWeb表示に戻すと再び明朝体に戻ってしまうという、iOS特有と思われる挙動が確認できました。
■ 以前行っていた「暫定的な」カスタマイズ（予備策）
※ プラグインを停止できない場合や、他の原因で明朝体になる場合の対症療法として、以下の方法も参考として残しておきます。
設定画面での変更では改善が見られなかったため、テーマの「追加CSS」に直接フォント指定を記述し、ブラウザ側の解釈を強制的に上書きする方法を試しました。
【設定場所】
外観 → カスタマイズ → 追加CSS
【記述したコード】
/* PCもiPhoneも、タイトル・本文・リストの全てをゴシック体に強制する */
body, .site-name, .entry-title, .entry-content p, li, ol, ul,
h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", "Meiryo", sans-serif !important;
}【記述のポイント】
・iPhone対策：「-apple-system」を指定し、iOS標準フォントを優先
・Windows対策：「Meiryo（メイリオ）」を明示
・強制力：「!important」により、割り込んでくるフォント指定を抑制
■ 結果とまとめ
今回の検証を通じて、追加CSSによる上書きはあくまで対症療法であり、根本原因はプラグインによるフォント指定の干渉であったことが分かりました。
現在はプラグインを停止したことで、CSSに頼らずとも、意図した通りのゴシック体で表示されています。
■ 謝辞
本記事の公開後、CSSの優先順位やフォント指定の矛盾点について、鋭いご指摘をくださった読者様に心より感謝申し上げます。
おかげさまで、より正確な情報をお伝えすることができました。
■ 検証環境
・iPhone（iOS 26.x）
・Windows 10 / 11
・WordPressテーマ：Cocoon
・サーバー：ConoHa WING
