エックスサーバー / さくらサーバーのWebフォントを利用する
さくらサーバーとエックスサーバーではWebフォントを利用して文字の見栄えをより綺麗にする事ができます。
ここではその設定方法について紹介します。
※ エックスサーバーとさくらサーバーでは設定方法はほぼ同じです。本記事ではエックスサーバーのプラグインについて記載しています。
サーバー側での設定
Webフォントを使うに当たって、エックスサーバーのサーバーコントロールパネルで設定する必要があります。
サーバーパネルの『Webフォントの設定』で指定のサイトをWebフォントを使いたいサイトに設定します。
Webフォントを使いたいサイトでプラグイン『TypeSquare Webfonts for エックスサーバー』を入れ有効化します。
有効化すると管理画面のメニューバーに『TypeSquareWebfonts』と言う項目が出てくるのでそこでフォントの設定などをしてください。
設定方法はサーバー会社によって異なりますので、下記の各サーバー会社の設定説明ページをご確認ください。
さくらインターネット（サイトはこちら）
エックスサーバー（サイトはこちら）
BizVektorやlightning固有の設定方法
BizVektorやLightningでは見出しや本文のフォントを指定しているため、プラグインで設定しただけで効かない箇所が出てきますので、
Webフォントを反映させるには「外観 > カスタマイズ」画面の「追加CSS」などに独自にCSSを記述する必要があります。
BizVektorの例
#content h2,
#content h3,
{ font-family:"新ゴ B"； }
#content p { font-family:"新ゴ B"； }
Lightningの例
.container h2,
.container h3,
{ font-family:"新ゴ B"； }
.container p { font-family:"新ゴ B"； }
というように、使いたいクラスごとでfont-familyで使用したいフォント名を設定してください。
フォントを変更する対象をどうやって指定するかは、下記の記事なども参照してみてください。
