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

1時間で1万円分のAmazonギフト券を確実にゲットする方法


現在、ITトレンドで普段お使いのWeb会議やチャットツール等の業務システムのレビューをするだけで1レビューにつき1,000円分のAmazonギフト券が必ず貰えるキャンペーンをやっています。

筆者も10個のレビューを書き1時間以内に1万円分のAmazonギフト券をゲットしました。

予算が無くなり次第終了となると思われるので早めにITトレンドレビュー投稿フォームにレビューを書いてAmazonギフト券1万円分をゲットしましょう。詳細は以下のリンクよりご確認ください。

ITトレンド公式サイト Amazonギフト券プレゼントキャンペーンの説明へ

会社のパソコンかつ業務時間中により回答できないという方は、以下QRコードでレビューの説明記事のリンクをスマホに飛ばしておきましょう。レビューの手順と確実にゲットするための注意事項等を纏めてあります。

ITトレンドにレビューを書いてAmazonギフト券1万円分を1時間で誰でも簡単にゲットする方法
ITトレンドにレビューを書いてAmazonギフト券1万円分を1時間で誰でも簡単にゲットする方法