TypeSquare Webfonts for エックスサーバーでWebフォントが適用されなくてハマりました。解消方法について解説します。
適用されない事象
WEBフォントが適用されない事象についてまとめます。
本サイトは、以下の構成です。
・サーバー
エックスサーバー のwpX Speed
・WordPressのテーマ
Luxeritasという無料のWordPressテーマ
エックスサーバーの無料で利用できるモリサワのWEBフォントを使ってみたところ見出し（Ｈ1～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フォント化されます。
コメント