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フォント化されます。