NEWS

これは凄い!日本語のWebフォントが無料で使えるエックスサーバーの新機能を使ってみました

更新日:

無料SSL化に続き、エックスサーバーが嬉しい機能を追加致しました。なんと日本語のWebフォント(モリサワ)が無料で使えるようになったのです!

さっそく使ってみたので、WordPressでの使い方と注意点を紹介したいと思います。

AFFINGER4、STINGER使用時の注意点もあります

日本語のWebフォントが無料で使えるエックスサーバーの使い方

Webフォントとは?

http://www.morisawa.co.jp/

今まで画像加工して使用してきたようなデザインフォントをテキストデータとして表示させることが可能になります。

閲覧状況を選ばず、同じフォントで表示させることができます。またエックスサーバーでは必要な文字ファイルだけを読み込みスピーディーな表示することが可能になっています。

エックスサーバーで使えるWebフォント

https://www.xserver.ne.jp/

使い方の流れ

管理画面

管理画面に新しく「Webフォント設定」というのが追加されています。

対象のドメインを選択して「設定する」をクリック

以上で、管理画面の作業は完了です!(簡単)

WordPressでの利用

https://wordpress.org/plugins/xserver-typesquare-webfonts/

Webフォントは「HTML記述形式」「WordPress用プラグイン」を使用する2パターンが用意されています。今回はプラグインを使用する方法をご紹介します。

プラグインのインストール

これから新規にWordPressをインストールする方には予めプラグインもインストールされるようですが、既存のサイトで使用したい場合は管理画面の「プラグイン」>「新規追加」より

「TypeSquare Webfonts for エックスサーバー」

を検索ボックスより検索してインストール、有効化します。

Webフォントの指定

Webフォントはいくつかのパターンと「新しくテーマを作成」が用意されています。

新しくテーマを作成

新しくテーマを作成する場合は「タイトル」「リード」「本文」「太字」に指定するフォントを個別に指定できます。

上級者向けのカスタマイズ

「タイトル」「リード」「本文」「太字」の内容は上級者向けのカスタマイズで「hタグ」別に指定できます。

各投稿ごとに設定するWebフォントを指定することも可能です

AFFINGER及びSTINGER PROをご利用の方へ

AFFINGER及びSTINGER PROでは「見出し」「タイトル」に游ゴシックが指定されているので管理画面にて解除して下さい。

簡単に自分のサイトでWebフォントを試してみたい!

Webフォントを導入する前に、自分のサイトに適応するとどんな感じになるかチェックできるシュミレーターが紹介されています。

https://typesquare.com/tryout/

確認したいURLを入れて「Tryout」をクリック

見出しや本文のフォントをシュミレーターで変更することでどんなフォントがサイトに合うかチェックできます。

面白いので試しにやってみてはどうでしょうか?

エックスサーバーでWebフォントを使用する注意点

エックスサーバーでWebフォントを使用できるのは25,000PV/月までで、それ以降は解除されてしまいます。有料でも良いので使用できるプランができると良いですね。

商用利用はもちろん問題ありません。そこまでPVの多くない企業サイトなどでは信頼感もUPして非常にお勧めだと思います。

ちなみに本記事で軽くテストした感じ↓

次々と独自のサービスを追加するエックスサーバーは利用者としては嬉しい限りです!

人気記事レンタルサーバー比較「WordPressを使うなら知っておきたいポイントは?」

ad

ad

-NEWS

Copyright© 無料WordPressテーマSTINGER , 2017 All Rights Reserved Powered by AFFINGER4.