「賢威8」で「TypeSquare Webfonts for エックスサーバー」を使用する際の注意点

エックスサーバー利用でWebフォントを適用させたい場合は、「TypeSquare Webfonts for エックスサーバー」プラグインの使用がオススメです。

TypeSquare Webfonts for エックスサーバー」プラグインとは

株式会社モリサワが提供するWebフォントサービスを利用できるプラグインです。
エックスサーバーでは、「TypeSquare」で提供されているWebフォントのうち、日本語30書体を無料で利用できます。
「フォントテーマ」機能では、サイトの雰囲気に合わせて「スタイリッシュ」「ポップ」「レトロ」などから選択でき、見出しや本文などの各箇所に対して簡単にWeb フォントの設定が行えます。

利用可能な書体見本一覧

設定方法

  1. エックスサーバーにてWebフォントを使用するドメインの設定
    エックスサーバーの「サーバーパネル」画面より「Webフォント設定」を選択します。
    Webフォント設定の追加」よりWebフォントを使用したいドメインを設定します。
  2. WordPressにてプラグインをインストール
    WordPress
    のプラグイン画面より「TypeSquare Webfonts for エックスサーバー」プラグインをインストールし有効化します。
  3. TypeSquare Webfonts Plugin for エックスサーバー」にてWebフォントを選択
    利用したいWebフォントを「フォントテーマ」より選択します。
    「上級者向けのカスタマイズ」では、タグ名やクラス名を追加することができ、Webフォントを適用させたい範囲を広げることができます。

設定方法の詳細につきましては、エックスサーバー公式サイトに説明があります。

「WordPressプラグインでのご利用」エックスサーバー

賢威で使用する際の注意点

「上級者向けのカスタマイズ」より「フォント設定クラス」の調整が必要

「上級者向けのカスタマイズ」を開くと「フォント設定クラス」の画面が表示されます。
「見出しタグ」に初期設定で「.entry_title」が入力されていますが、賢威ではクラス名が「.entry_title」ではなく「.entry-title」が使用されているため、変更または追記を行います。
また、本文にも適用させたい場合は「本文タグ」に「p」を追記しておきましょう。

サイトタイトルにWebフォントを適用させる場合

画像:style.cssの編集画面

プラグインの設定画面では賢威のサイトタイトルにWebフォントを適用させることができません。
そのため、「style.css」にCSSを記述する必要があります。
「WordPress管理画面」→「外観」→「テーマエディタ」→「style.css」を開き、下記のCSSを追記します。

※「見出ゴMB31」の部分は適用させたいフォントの種類へ変更してください

設定が反映されない際の確認ポイント

エックスサーバーの「Webフォント設定」にドメインを追加(登録)しましたか?

Webフォントを使用するには、エックスサーバーの「Webフォント設定」画面にて「Webフォント設定の追加」よりドメインを追加(登録)する必要があります。
ドメインを複数お持ちの方はドメインの選択に誤りがないか再度確認してみましょう。

複数のドメインへWebフォントを適用させようとしていませんか?

エックスサーバーでは、1つのドメインにのみWebフォントが適用されます。
※サブドメインも1ドメインとカウントされるので注意が必要です。

そのため、Webフォントをドメイン(01w.dev)に適用していて、サブドメイン(test.01w.dev)に適用させたい場合は、一旦現在のドメイン設定を解除(削除)して、サブドメインを追加(登録)する必要があります。

変更した際に「更新する」ボタンを押し忘れてはいませんか?

変更したことに満足して「更新する」ボタンを押し忘れないように注意しましょう。