【SANGOカスタマイズ】ヘッダーのフォントが変わらない問題と解決法 | 飯田市ホームページ制作デザインスタジオiR

今回はWordPressの人気テーマ「SANGO」を使っている中で、ヘッダーのフォントを変更しようとしたら反映されないトラブルに遭遇した経験と、その解決策を共有します。

1. 問題の概要

SANGOのヘッダーは「コンテンツブロック」機能を利用して登録していました。
AdobeのWebフォントを導入し、ヘッダーのリンクテキストに使いたいフォントを指定したのですが…

スマホ表示では問題なく反映される一方、PC表示のヘッダー部分だけフォントが変わらず、元のままでした。

2. なぜヘッダーのフォントが変わらなかったのか？

SANGOのコンテンツブロックは独自のHTML構造やスタイルが適用されており、単純にaタグにフォント指定をしても、テーマやコンテンツブロックのCSSの方が優先されてしまうことが多いです。
また、Adobe Webフォントはフォント名を正確に指定する必要があり、指定方法が間違っていると反映されません。
PC版のヘッダーは、スマホ版とは異なるCSSが適用されていることが多く、メディアクエリでスタイルが分かれている場合もあります。

解決方法：クラスを活用して強制的にフォント指定

コンテンツブロックで「ブロック」を選択し、「高度な設定」の「追加CSSクラス」にクラス名を追加

メニューのブロックを選択すると、右下の方に「高度な設定」が表示されます。

そこに、以下のクラス名を追加します。
「.」や「#」は不要です。

custom-font-nav

「外観」→「カスタマイズ」→「追加CSS」の一番下に下記の強力なCSSを記述する。

.custom-font-nav,
.custom-font-nav a,
.custom-font-nav a > span {
  font-family: "fot-tsukuardgothic-std", "Yu Gothic", "游ゴシック", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

フォント名は任意で書き換えてください。
一部のWEBフォントを使用するにはアドビなどの供給元との契約や登録が必要となることがあります。

4. その他のポイント

CSS編集後はブラウザキャッシュやWordPressのキャッシュをクリアしましょう。
Adobe Webフォントなどの有料フォントは読み込みコード（<link>やJavaScript）が正しくテーマヘッダーに入っているかも必ず確認してください。
スマホ・PCで適用範囲が分かれている場合、メディアクエリでPC用のフォント指定も別途書く必要があります。