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

このトピックには8件の返信、3人の参加者があり、最後に石川＠Vektor,Inc.により4年、 11ヶ月前に更新されました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)

投稿者

投稿
2020年11月30日 4:08 PM #45171

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 エックスサーバーの設定については画像添付いたします。

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

Attachments:
You must be logged in to view attached files.

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

2020年11月30日 5:31 PM #45175

石川＠Vektor,Inc.
キーマスター

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

2020年11月30日 8:26 PM #45183

maru-design
閲覧者

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

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

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

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

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

2020年11月30日 11:23 PM #45193

しあわせ屋根屋
参加者

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

2020年12月1日 5:20 AM #45195

maru-design
閲覧者

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

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

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

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

2020年12月1日 2:51 PM #45209

石川＠Vektor,Inc.
キーマスター

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

2020年12月1日 3:10 PM #45211
石川＠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;
}
```
2020年12月2日 8:51 AM #45244

maru-design
閲覧者

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

2020年12月2日 10:24 AM #45246

石川＠Vektor,Inc.
キーマスター

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

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

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

投稿