[ 解決済 ] カスタム投稿ページのWebフォント

[maru-design]

WP：バージョン 5.5.3–ja
テーマ：habakiriバージョン: 2.5.2
TypeSquare Webfonts for エックスサーバー：バージョン 1.2.1
VK All in One Expansion Unit：バージョン 9.48.1.0

■ 質問内容：

VK All in One Expansion Unitにてカスタム投稿（info）を作成したのですが、他のページで適用されているエックスサーバーのWebフォントが適用されません。

ページのソースでは、Webフォントを表示させるためのscriptタグは確認できますし、CSSのfont-familyの記述も読み込まれていますが、フォントが変わらず他のページと異なるフォントになっているのです。

具体的には、ナビゲーションメニューやページタイトルなどに適用されている”新丸ゴ R”などです。

TypeSquare Webfonts for エックスサーバーの設定については画像添付いたします。

何かこの現象について、お心当たりがありましたら教えていただきたく、よろしくお願いいたします。

• このトピックはmaru-designが3年、 11ヶ月前に変更しました。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

* info も他のページと同じように見えますがどのあたりの事でしょうか？
* そもそもフォント指定はテーマの指定に依存する事が多く、汎用のエックスサーバーのフォント指定は正しく適用されない場合があります。
* 外観 > カスタマイズ > Lightningフォント設定からの指定ではダメでしょうか？

[maru-design]

回答ありがとうございます。

見て分かりやすい部分はヘッダーのナビゲーションです。
カスタム投稿以外の他のページは丸ゴシックになっていますが、カスタム投稿のページは角ゴシックでサイズも小さく見えると思います。

CSSではどちらのページも丸ゴシックになっていますし、きちんとWebフォントを読み込むためのスクリプトタグもあるのに、何故か適用されません。

CSSに!importantをつけてみても適用されませんし、デベロッパーツールで見ても取り消し線が付いていないので適用はされています。

何かカスタム投稿のコードがWebフォント用のJavaScriptとバッティングしているのかもと思いましたが、制作された方に心当たりがないということでしたら、何か他の原因があるのでしょうか。

[しあわせ屋根屋]

横からすみません。確かに、上の緑色の帯の中の文字、
INFOの「お知らせ」とCONTACTの「お問合せ」の「お」「せ」を比較すると違うフォントですね。
ですがこちらから見るとお書きのものと逆で、INFOの方が丸ゴシで、CONTACT他の方が角ゴシで見えてますよ。

[maru-design]

しあわせ屋根屋さま
ご回答ありがとうございます。

大変失礼しました。
緑の帯のページタイトルは丸ゴシックではありませんでした。
混乱させてしまいすみません。
ヘッダーのグローバルナビゲーションは新丸ゴというWebフォントを適用しています。

もう一つ、肝心なことを忘れていました…
Webフォントが適用されていないと、見ている人のデバイスに入っているフォントが適用されるので、それぞれ違うフォントが表示されるのですよね。

もしかしたら、石川さんの環境では新丸ゴが入っているため、変わらないように見えるのかもしれないと思いました。

[石川＠Vektor,Inc.]

あー、たしかに。
症状確認しました。ちょっとみてみます。
※返信不要

[石川＠Vektor,Inc.]

エックスサーバーのプラグインがどういう仕様なのかわかりませんが、
まず、概観 > カスタマイズ > 追加CSS に以下を貼り付けて改善しますか？

p,
post-inner.entry-content p,
ul {
    font-family: "新丸ゴ R" !important;
}
h1,h2,h3,h4,h5,blog .entry__summary{ 
font-family: "見出ゴMB31" !important;
}
h6{ 
font-family: "新丸ゴ R" !important;}p,post-inner.entry-content p,ul{ font-family: "新丸ゴ R" !important;}strong,b{ font-family: "見出ゴMB31" !important;
}

• この返信は3年、 11ヶ月前に石川＠Vektor,Inc.が編集しました。
• この返信は3年、 11ヶ月前に石川＠Vektor,Inc.が編集しました。

[maru-design]

確認が遅くなりすみません。
いただいたCSSで適用されました！
色々試しても出来なかったので、CSSの問題ではないと思い込んでいました。
助かりました。
ありがとうございました！

[石川＠Vektor,Inc.]

とりあえず効いたようでよかったです。
アーカイブページだけ別のCSSを吐き出してたので、どういう処理になってるのか謎ですが、他のページで出力されているCSSと同じのをもってくればいけるかなと思った次第です。

が、こんな感じで相性とか他の人が作ったのはよくわからない問題もありますので、
できるだけ 外観 > カスタマイズ > Lightning フォント設定 からのフォント指定をご検討ください。

今後ともLightningをよろしくお願いいたします。

[投稿者]

投稿