エックスサーバー / さくらサーバーのWebフォントを利用する
さくらサーバーとエックスサーバーではWebフォントを利用して文字の見栄えをより綺麗にする事ができます。
ここではその設定方法について紹介します。
※ エックスサーバーとさくらサーバーでは設定方法はほぼ同じです。本記事ではエックスサーバーのプラグインについて記載しています。
サーバー側での設定
Webフォントを使うに当たって、エックスサーバーのサーバーコントロールパネルで設定する必要があります。
サーバーパネルの『Webフォントの設定』で指定のサイトをWebフォントを使いたいサイトに設定します。
Webフォントを使いたいサイトでプラグイン『TypeSquare Webfonts for エックスサーバー』を入れ有効化します。
有効化すると管理画面のメニューバーに『TypeSquareWebfonts』と言う項目が出てくるのでそこでフォントの設定などをしてください。
設定方法はサーバー会社によって異なりますので、下記の各サーバー会社の設定説明ページをご確認ください。
BizVektor固有の設定方法
BizVektorでは見出しや本文のフォントを指定しているため、プラグインで設定しただけでは適用されないことがありますので、その場合は「外観 > カスタマイズ」画面の「追加CSS」などに独自にCSSを記述する必要があります。
BizVektorの例
#content h2,
#content h3 { font-family: "新ゴ B"; }
#content p { font-family: "新ゴ B"; }※ “新ゴ B” の部分はTypeSquareで設定したフォント名に置き換えてください。
特定の要素に適用されない場合
特定の要素にフォントが適用されないことがあります。その場合はブラウザの開発者ツールで対象のセレクタを確認し、以下の場所に追加CSSで上書きしてください。
- クラシックテーマの場合：「外観 > カスタマイズ」画面の「追加CSS」
- ブロックテーマの場合：「外観 > エディター > スタイル > 追加CSS」
CSS の例
例えばリストブロックにフォントが適用されない場合は以下のように記述します（セレクタはテーマによって異なる場合があります）。
.wp-site-blocks ul,
.wp-site-blocks ol,
.wp-site-blocks li { font-family: "新ゴ B"; }※ “新ゴ B” の部分はTypeSquareで設定したフォント名に置き換えてください。
フォントを変更する対象をどうやって指定するかは、下記の記事なども参照してみてください。
全てのWordPressテーマで使える！デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜 | 株式会社ベクトル
全てのWordPressテーマで使える！デザインをピンポイントで変更する方法
【補足】ブロックテーマでGoogleフォントを使う方法
X-T9などのブロックテーマをお使いの場合、Googleフォントであれば「外観 > エディター > スタイル」からCSSを記述せずにフォントを設定できます。
