TypeSquare Webfonts for エックスサーバーは必要？メリットを解説

フェニック

WordPressの「TypeSquare Webfonts for エックスサーバー」は、どんなプラグイン？

今回はこのような疑問にお答えします。

「TypeSquare Webfonts for エックスサーバー」は、Webフォントを表示させるプラグインです。

使用することで、文字でブログの世界観を表現できます。

実際にWebフォントを表示させた画像を、豊富に掲載しています。

プラグインを削除する前に、ぜひ一度ご覧ください。

この記事の著者

Shota　@Shota_Lab_1

3年目の副業ブロガー。2年間のブログ経験を活かし、2022年にブログフェニックスを設立。
WordPress立ち上げのノウハウを配信中。

著者情報の詳細

当サイトのテーマ｜SWELL

¥17,600（税込）

導入方法を見るCocoonから乗り換え

TypeSquare Webfonts for エックスサーバーとは

「TypeSquare Webfonts for エックスサーバー」とは、Webフォントを表示させるプラグインです。

プラグインを設定することで、モリサワが開発したWebフォントをブログに表示することができます。

なお「TypeSquare Webfonts for エックスサーバー」は、エックスサーバーのWordPressにデフォルトでインストールされています。

TypeSquare Webfonts for エックスサーバーはいらない？

ブログの運営目的によります。

デザインだけではなく、文字でもブログの世界観を表現したい方にはおすすめのプラグインです。

上記の目的がない方は削除して構いません。

TypeSquare Webfonts for エックスサーバーのメリット

「TypeSquare Webfonts for エックスサーバー」を利用するメリットは3点です。

Shota

ブログの世界観に合致するフォントを選べるのが最大のメリットです。

ブログの世界観に合致するフォントを選択できる

「TypeSquare Webfonts for エックスサーバー」には16種類のテーマが用意され、33種類のフォントを使用できます。

Shota

テーマごとにフォントを見てみましょう。

フェニック

見出しとリード文だけ紹介するよ。

デフォルトのフォント

①ベーシックのフォント

ベーシックの見出しとリード文のフォントは、以下になります。

②スタイリッシュのフォント

スタイリッシュの見出しとリード文のフォントは、以下になります。

③カジュアルのフォント

カジュアルの見出しとリード文のフォントは、以下になります。

④ニュースのフォント

ニュースの見出しとリード文のフォントは、以下になります。

⑤ビジネスのフォント

ビジネスの見出しとリード文のフォントは、以下になります。

⑥ファッションのフォント

ファッションの見出しとリード文のフォントは、以下になります。

⑦エレガントのフォント

エレガントの見出しとリード文のフォントは、以下になります。

⑧繊細のフォント

繊細の見出しとリード文のフォントは、以下になります。

⑨ポップのフォント

ポップの見出しとリード文のフォントは、以下になります。

⑩コミカルのフォント

コミカルの見出しとリード文のフォントは、以下になります。

⑪和風のフォント

和風の見出しとリード文のフォントは、以下になります。

⑫はんなりのフォント

はんなりの見出しとリード文のフォントは、以下になります。

⑬伝統のフォント

伝統の見出しとリード文のフォントは、以下になります。

⑭ナチュラルのフォント

ナチュラルの見出しとリード文のフォントは、以下になります。

⑮レトロのフォント

レトロの見出しとリード文のフォントは、以下になります。

⑯ホラーのフォント

ホラーの見出しとリード文のフォントは、以下になります。

TypeSquare Webfonts for エックスサーバーのおすすめテーマ

「TypeSquare Webfonts for エックスサーバー」のおすすめテーマと、合致するブログジャンルを記載します。

ぜひ参考にしてください。

TypeSquare Webfonts for エックスサーバーのデメリット

この項目では「TypeSquare Webfonts for エックスサーバー」のデメリットを2点解説します。

Shota

最大のデメリットは、モバイルの表示速度が遅くなることです。

モバイルの表示速度が遅くなる

「TypeSquare Webfonts for エックスサーバー」を使用すると、モバイルの表示速度が遅くなります。

「TypeSquare Webfonts for エックスサーバー」を使用した場合の表示速度を、不使用の場合と比較しました。

表示速度の測定条件

表示速度は、PageSpeed Insightで測定しました。

評価指標は以下になります。

より詳しい測定条件は、以下の記事で解説しています。

表示速度の結果（パフォーマンススコア）

「TypeSquare Webfonts for エックスサーバー」を使用した場合、モバイルのパフォーマンススコアが5.2点低下しました。

表示速度の結果（Time to Interactive）

「TypeSquare Webfonts for エックスサーバー」を使用した場合、モバイルのTime to Interactiveが1.3秒遅くなりました。

以上の結果から「TypeSquare Webfonts for エックスサーバー」を使用すると、モバイルの表示速度が遅くなると結論付けました。

（参考）使用に制約がある

「TypeSquare Webfonts for エックスサーバー」の制約は、以下の2つです。

フェニック

月間75,000PVのブログって凄いの？

Shota

ブログの中でも上位10%に入るよ。だから気にしなくていいです。

TypeSquare Webfonts for エックスサーバーの設定方法

この項目では「TypeSquare Webfonts for エックスサーバー」を使用し、Webフォントを表示させる方法を解説します。

エックスサーバーでの設定

Xserverアカウントに移動し【サーバー管理（サーバーパネル）】をクリックします。

契約したサーバーを選択しましょう。

サーバーパネルに移動したら【Webフォント設定】をクリックします。

Webフォントを表示させるドメインを選択します。

【Webフォント設定の追加】⇒【設定する】をクリックしましょう。

「Webフォント設定が完了しました。」と表示されたら、エックスサーバーでの設定は完了です。

WordPressでの基本設定

WordPressの管理画面に移動し【プラグイン】⇒【インストール済みプラグイン】をクリックします。

「TypeSquare Webfonts for エックスサーバー」を有効化しましょう。

WordPressの管理画面に【TypeSquare Webfonts】が表示されるので、クリックします。

好みにテーマを選択し【フォントテーマを更新する】をクリックすれば、Webフォントが適用されます。

適用箇所ごとにWebフォントを設定

「TypeSquare Webfonts for エックスサーバー」では適用箇所ごとに、Webフォントの種類を設定できます。

今回は以下のように設定しました。フォントの雰囲気を確認しましょう。

タイトル、見出し

「タイトル、見出し」の設定は、以下になります。

リード文、本文

「リード文、本文」の設定は、以下になります。

太字

「太字」の設定は、以下になります。

WordPressでの応用設定

【上級者向けのカスタマイズ】をクリックすると、以下の応用設定が可能になります。

フォント設定クラスは、設定にコードの専門知識が必要なため変更しなくてOKです。

個別記事フォントの設定

個別記事フォントの設定を有効化することで、記事ごとにフォントテーマを設定できます。

【記事ごとにフォントを設定】の項目にある【有効化する】にチェックを入れます。

チェックを入れたら【個別記事フォント設定を更新する】をクリックしましょう。

これでWordPressの投稿画面にフォントテーマが表示されます。

WordPressの投稿画面に移動し【フォントテーマから選ぶ】をクリックしましょう。

好みのフォントテーマを選択すれば、記事公開後にWebフォントが適用されます。

TypeSquare Webfonts for エックスサーバーの解除方法

この項目では「TypeSquare Webfonts for エックスサーバー」の解除方法について解説します。

WordPressでの解除設定

WordPressの管理画面から【プラグイン】⇒【インストール済みプラグイン】をクリックします。

「TypeSquare Webfonts for エックスサーバー」の【無効化】をクリックしましょう。

これでWordPressでの解除設定は完了です。

エックスサーバーでの解除設定

エックスサーバーのサーバーパネルに移動し【Webフォント設定】をクリックしましょう。

解除するドメインを選択します。

【削除】をクリックすれば「TypeSquare Webfonts for エックスサーバー」の解除は完了です。

TypeSquare Webfonts for エックスサーバーのまとめ

今回は「TypeSquare Webfonts for エックスサーバー」について解説しました。

さくっと内容をまとめます。

今回の内容は以上です。