さくらレンタルサーバーで株式会社モリサワ の「リュウミン」「新ゴ」「じゅん」といったフォントをWebフォントとして利用できるTypeSquareのサービスが無料で使えるようになったと聞いて試してみました。
利用条件、TypeSquareを利用するメリット、利用方法（プラグインやさくらサーバー側の設定）等をまとめてみました。
目次
Webフォントとは。
Webデザインにおいて、「もうちょっと変化・アクセントが欲しいな～」という場面は良くあると思います。
特に近年のシンプルなWebデザインにおいては、テキストの見せ方が重要と言えるでしょう。
そんな時の選択肢として、「Webフォント」があるわけですが、Webフォントを利用するには様々な条件を考えなくてはいけませんでした。
Webフォントは、サーバーにフォントデータを配置してCSSで読み込ませるわけですが、サーバーに設置する＝再配布 になるため、
- まず、フォントってお高い
- ライセンスの問題（そもそも再配布が許可されているか）
- 日本語フォントはデータが大きいので、読み込み速度の問題
- 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フォント」メニューが追加されています。
こちらから、「Webフォント利用ドメインの設定」を行うだけです。
これだけでサーバー側の設定は完了。
WordPress側の設定 プラグインのインストール
さくらサーバーで利用中のWordPressに、TypeSquareのプラグインを導入する形になります。
- プラグイン名
- TypeSquare Webfonts さくらのレンタルサーバ 1.0.3
- 配布元
- https://wordpress.org/plugins/ts-webfonts-for-sakura/
プラグイン ＞ 新規追加 ＞ TypeSquare で検索
＞ インストール・有効化
メニューに「TypeSquare Webfonts」が追加されます。
フォントテーマ設定
デフォルトでベーシック・ニュース といったフォントテーマが利用できますが、カスタムフォントテーマ（後述）を作成することもできます。
上級者向けのカスタマイズ
デフォルトで下記のタグ・クラスにWebフォントが適用されるようになっています。
見出し（タイトル）タグ・・・h1,h2,h3,.entry-title
リードタグ・・・h4,h5,h6,.read
本文タグ・・・.hentry,.text
強調タグ・・・strong,b,.emphasis
今回は実験でクラスの追加も行ってみました。
既存の設定に追加する際は、カンマ区切りを忘れないようにしましょう。
フォントテーマ個別表示設定
フォントテーマ個別設定を有効にすると、記事毎にフォントテーマが選択できるようになるようです。
編集画面のメタボックスに、テーマ設定が追加されます。
カスタムフォントテーマを作る
前述の「見出しタグ」「リードタグ」「本文タグ」「強調タグ」に、なんのフォントを適用するかを設定する。
それが「カスタムフォントテーマ」となっています。
TypeSquareメニュー ＞ カスタムフォントテーマ
「新しいカスタムフォントテーマを作成する」を選びます。
適用箇所は前述のこちら
と対応しているというわけですね。
1.書体分類を選択する
2.1で選んだ書体に対応するフォントファミリーを選択
3.2で選んだフォントファミリーに対応するフォントを選択
という流れで「見出しタグ」「リードタグ」「本文タグ」「強調タグ」にフォントを適用していきます。
今回はこんな感じで設定。
表示を確認する
あとは投稿で確認するわけですが、せっかくなので追加したクラスで表示を確認したいと思います。
投稿をこんな感じで。
<span class="title">タイトルのテストです。</span> <span class="read">リードタグのテストです。</span> <span class="text">本文のテストです。</span> <span class="emphasis">強調タグのテストです。</span> その他、本文のテストです。
で、表示してみます。
開発者ツールでも確認し、それぞれのフォントが適用されていることを確認しました。
まとめ
ここまでできてTypeSquareが無料というのはうれしいですね！
月間2.5万PVということで若干限定されますが、一般的なコーポレート、キャンペーンサイト、LPなんかには向いているのではないでしょうか。
「さくらのレンタルサーバ」スタンダードプラン以上
「さくらのマネージドサーバ」
ということで、月額500円程度～のサーバー代金のみでTypeSquareの30種類のフォントが利用できることになります！
スタンダード以上のプランを利用している方は是非試してみて下さいね！
クライアントワークでも、「安くて良いレンタルサーバー無いですか？」と聞かれてさくらサーバーをおすすめすることが多い自分にとっては、大変良いニュースでした。
さくらサーバーは良く利用していますが、使い勝手、値段、安定性等、コストパフォーマンスの面ではかなり信頼しています。
これを機に、サーバーの選択肢の一つをしてさくらレンタルサーバーも検討してみて下さい！