さくらのレンタルサーバでモリサワフォントを無料使用：静的サイトでの設定方法

さくらのレンタルサーバでモリサワのWebフォント30種類が無料で使えます。

利用可能なプランはスタンダードプラン以上、最安値のライトプランは使えません。
ちなみにスタンダードプランは月額515円（初期費用1,029円）です。

当初はWordPressのみで使用可能でしたが、昨年9月より通常の静的サイト（HTML+CSS）でも使えるようになりました。

今回はこのWebフォントのご紹介。

利用可能フォント・使用条件

使用可能なWebフォントは30種類です。

【明朝体】
リュウミンR-KL、リュウミンM-KL、見出ミンMA31、A1明朝

【ゴシック体】
新ゴR、新ゴM、ゴシックMB101B、見出ゴMB31、ナウGM

【丸ゴシック体】
じゅん201、じゅん501、新丸ゴR

【デザイン書体】
フォークR、フォークM、丸フォークR、丸フォークM、カクミンR、解ミン宙B、シネマレター、トーキング、はるひ学園、すずむし、G2サンセリフ-B

【装飾書体】
新丸ゴ太ライン

【筆書体】
正楷書CB1、隷書101

【UD新書体】
UD新ゴR、UD新ゴM、UD新ゴコンデンス90L、UD新ゴコンデンス90M

使用条件は以下になります。

◇スタンダードプラン以上
◇１ドメインまで
◇ドメインの月間PV数が2.5万以下
◇ドメインの年間PV数が30万以下

この4条件を満たせば使えます。

では、設定手順の解説です。

まず、さくらの「サーバコントロールパネル」にログインします。

「運用に便利なツール」⇒「Webフォント」をクリックします。

「Webフォント利用ドメインの設定」欄にて、Webフォントを使用するドメインを選択して「設定」をクリックします。

これでコントロールパネルからの設定は完了です。

この時、すでに他のドメインを選択済の場合、一旦「設定しない」を選択して「設定」をクリック、その上で再度使用するドメインを選択し直してください。

次に、Webフォントを使用するサイトのHTMLに、以下のコードを記述します。
コードはheadの閉じタグの前に入れてください。

<script type="text/javascript" src="//webfonts.sakura.ne.jp/js/sakura.js"></script>

CSSにてfont-familyを設定します。
以下、設定例。

HTML

<p class="web-font">春は曙</p>

CSS

.web-font {
    font-family: "リュウミン M-KL";
    }

htmlのタグに直接記述してもかまいません。

<p style="font-family: 'リュウミン M-KL'">春は曙</p>

font-familyに記述するフォント名は以下になります。
30種類有ります。