ITフリーランス向け業務委託案件の紹介サービス「ココナラ」詳細はこちら

TypeSquare Webfonts for エックスサーバーでWebフォトが適用されない場合の対処方法

TypeSquare Webfonts for エックスサーバーでWebフォントが適用されなくてハマりました。解消方法について解説します。

目次

適用されない事象

WEBフォントが適用されない事象についてまとめます。

本サイトは、以下の構成です。

・サーバー

エックスサーバー のwpX Speed

・WordPressのテーマ

Luxeritasという無料のWordPressテーマ

エックスサーバーの無料で利用できるモリサワのWEBフォントを使ってみたところ見出し(H1~H5)はWEBフォント化できたのですが、肝心の本文がWEBフォント化できないという冴えない状態となりました。

解消方法

原因:WordPressテーマ(Luxeritas)の本文のClass情報がTypeSquare Webfonts Plugin for エックスサーバーに登録されていなかったことが原因でした。

詳しく解説していきますね

Google ChromeのデベロッパーツールでWEBフォント化されない箇所のソースコードを確認してください。私の場合は本文です。

すると、clearfixというclassが本文に適用されているといことが分かりました。このclassに対してWEBフォントが適用されるように指定されている必要があります。

TypeSquare Webfonts Plugin for エックスサーバーの「上級者向けのカスタマイズ」を開いてください、上級者向けのカスタマイズでは4つのカテゴリー毎に適用されるClass及びタグを任意で指定することができます。

本文タグ項目に先ほど確認した「.clearfix p」を追加したところ本文が正常にWEBフォント化されました。

その他のWEBフォント化されていな箇所についても同様のことをすればWEBフォント化されます。

ここ最近、筆者は仕事と子育てに追われています。その中で、学びをスケジュールに組み込むために、Amazonが提供する本を聴くことができるサービス「Audible」を使い始めました。旅行や家事や運動、お風呂の時間などに本を取り入れることで、知識欲を満たすことができています。2カ月間無料で利用できますので試してみてはいかがでしょうか。

筆者もやってます!副業してインフレ対策するならクラウドリンクスに登録

コメント

コメントする

目次