さくらレンタルサーバーのWordPressで株式会社モリサワ TypeSquare(30種類のWebフォント)を無料で使えるようになったと聞いて試してみた。

さくらレンタルサーバーで株式会社モリサワ の「リュウミン」「新ゴ」「じゅん」といったフォントをWebフォントとして利用できるTypeSquareのサービスが無料で使えるようになったと聞いて試してみました。

利用条件、TypeSquareを利用するメリット、利用方法(プラグインやさくらサーバー側の設定)等をまとめてみました。

Webフォントとは。

Webデザインにおいて、「もうちょっと変化・アクセントが欲しいな~」という場面は良くあると思います。
特に近年のシンプルなWebデザインにおいては、テキストの見せ方が重要と言えるでしょう。

そんな時の選択肢として、「Webフォント」があるわけですが、Webフォントを利用するには様々な条件を考えなくてはいけませんでした。

Webフォントは、サーバーにフォントデータを配置してCSSで読み込ませるわけですが、サーバーに設置する=再配布 になるため、

  1. まず、フォントってお高い
  2. ライセンスの問題(そもそも再配布が許可されているか)
  3. 日本語フォントはデータが大きいので、読み込み速度の問題
  4. 3の問題をクリアするために、サブセット化(必要なフォントのみを選択し、軽量化してサーバーに設置)が必要になる

といった点を考慮しなくてはいけませんでした。

サブセット化についてはこちらも参考にしてください。
Noto sans font をサブセット化

株式会社モリサワのTypeSquareでは、そのページに使われている文字を抽出し、サブセット化されたフォントを配信します。
そのため、全フォントデータを読み込ませる必要が無く、読み込み速度の問題が解決できます。

詳しくは、TypeSquareのサイトをご覧ください。
http://typesquare.com/

さくらレンタルサーバーのWordPressでTypeSquareを利用する方法

通常、TypeSquareを利用するには、契約が必要でした。

無料プラン1万PV / 月
書体数 1 ドメイン数 1
¥2,160 / 月 のプラン 25万PV / 月
書体数 3 ドメイン数 2

といった条件があります。
これが、さくらレンタルサーバーでは

2.5万PV / 月 で無料
書体数 30 ドメイン数 1

という、魅力的な条件となっています。
一般的なコーポレートサイトでは十分対応できるケースも多いのではないでしょうか。

利用条件

PV等は前述のとおりですが、さくらサーバー側の条件として、

「さくらのレンタルサーバ」スタンダードプラン以上
「さくらのマネージドサーバ」

で利用可となります。





サーバー側の設定

さくらサーバーのコントロールパネル「運用に便利なツール」の中に、「Webフォント」メニューが追加されています。

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_52

こちらから、「Webフォント利用ドメインの設定」を行うだけです。
さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_55

これだけでサーバー側の設定は完了。

WordPress側の設定 プラグインのインストール

さくらサーバーで利用中のWordPressに、TypeSquareのプラグインを導入する形になります。

プラグイン名
TypeSquare Webfonts さくらのレンタルサーバ 1.0.3
配布元
https://wordpress.org/plugins/ts-webfonts-for-sakura/

プラグイン > 新規追加 > TypeSquare で検索

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_03

> インストール・有効化

メニューに「TypeSquare Webfonts」が追加されます。

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_07

フォントテーマ設定

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_10

デフォルトでベーシック・ニュース といったフォントテーマが利用できますが、カスタムフォントテーマ(後述)を作成することもできます。

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

デフォルトで下記のタグ・クラスにWebフォントが適用されるようになっています。

見出し(タイトル)タグ・・・h1,h2,h3,.entry-title

リードタグ・・・h4,h5,h6,.read

本文タグ・・・.hentry,.text

強調タグ・・・strong,b,.emphasis

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_07_14

今回は実験でクラスの追加も行ってみました。

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_44

既存の設定に追加する際は、カンマ区切りを忘れないようにしましょう。

フォントテーマ個別表示設定

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_14

フォントテーマ個別設定を有効にすると、記事毎にフォントテーマが選択できるようになるようです。

編集画面のメタボックスに、テーマ設定が追加されます。

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_16

カスタムフォントテーマを作る

前述の「見出しタグ」「リードタグ」「本文タグ」「強調タグ」に、なんのフォントを適用するかを設定する。
それが「カスタムフォントテーマ」となっています。

TypeSquareメニュー > カスタムフォントテーマ

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_25

「新しいカスタムフォントテーマを作成する」を選びます。

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_29

適用箇所は前述のこちら
さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_07_14
と対応しているというわけですね。

1.書体分類を選択する
さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_35

2.1で選んだ書体に対応するフォントファミリーを選択
さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_38

3.2で選んだフォントファミリーに対応するフォントを選択
さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_35

という流れで「見出しタグ」「リードタグ」「本文タグ」「強調タグ」にフォントを適用していきます。
今回はこんな感じで設定。

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_48

表示を確認する

あとは投稿で確認するわけですが、せっかくなので追加したクラスで表示を確認したいと思います。

投稿をこんな感じで。
さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_60

<span class="title">タイトルのテストです。</span>
<span class="read">リードタグのテストです。</span>
<span class="text">本文のテストです。</span>
<span class="emphasis">強調タグのテストです。</span>
その他、本文のテストです。

で、表示してみます。

さくらサーバーでTypeSquareの30種類のWebフォントを無料で使う方法_64

開発者ツールでも確認し、それぞれのフォントが適用されていることを確認しました。

まとめ

ここまでできてTypeSquareが無料というのはうれしいですね!
月間2.5万PVということで若干限定されますが、一般的なコーポレート、キャンペーンサイト、LPなんかには向いているのではないでしょうか。

「さくらのレンタルサーバ」スタンダードプラン以上
「さくらのマネージドサーバ」

ということで、月額500円程度~のサーバー代金のみでTypeSquareの30種類のフォントが利用できることになります!

スタンダード以上のプランを利用している方は是非試してみて下さいね!

クライアントワークでも、「安くて良いレンタルサーバー無いですか?」と聞かれてさくらサーバーをおすすめすることが多い自分にとっては、大変良いニュースでした。

さくらサーバーは良く利用していますが、使い勝手、値段、安定性等、コストパフォーマンスの面ではかなり信頼しています。
これを機に、サーバーの選択肢の一つをしてさくらレンタルサーバーも検討してみて下さい!





コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です