さくらインターネットのモリサワフォントを静的htmlで使う方法

2016年9月17日2020年5月9日アプリ・ネット

さくらインターネットで無料で使えるモリサワフォントをWordPressのプラグインを使わずに利用する方法です。サービス開始直後はWordPressのプラグインが必要でしたが、2016年9月よりさくらのスクリプトを読み込ませるだけで使えるようになりました。

使える30書体や詳細はWebフォント機能 – さくらのサポート情報に書かれています。

利用条件と制約があるので、まずは使えるかを確認してください。

さくらのレンタルサーバ「スタンダード」以上の契約
1契約につき1ドメイン
2万5,000ページビューまで
フォントの太さは変えられない

導入方法

使いたいドメインを指定する

1契約あたり1ドメインでしか使えないので、さくらサーバのコントロールパネルから使いたいドメインを指定します。まずコントロールパネルから「Webフォント」設定を開きます。

さくらサーバ用モリサワフォント設定画面 — **さくらサーバコントロールパネル**

上のSSでは「登録ドメイン名」に選択肢が表示されていませんが、さくらのサブドメインを使っていれば、「登録ドメイン名」からも選択できるようになります。

このページではフォントが表示された回数も確認できます。

jsファイルを読み込む

headでさくらの用意したjavascriptを読み込みます。

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

場所は<⁄head>の手前でいいです。

<head>
<meta ……>
……
<title>ページタイトル</title>
<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.js"></script>
<⁄head>

これで準備完了です。

使い方

フォントの種類を指定する

フォントの種類はスタイルシートで行います。フォント名で日本語を使ったりアルファベットでもスペースがある場合はクォーテーション"かダブルクォーテーション""でくくってください。

ここではh1タグに"Midashi Min MA31″を、pタグに"Ryumin Medium KL"を指定します。

CSSの外部ファイルを利用している場合

外部ファイルを使っているのなら、そのCSSファイルにこのまま記述します。

h1{font-family:"Midashi Min MA31";font-size:30px;}
p{font-family:"Ryumin Medium KL";font-size:16px;}

すでにh1とpにスタイルを定義済みでfont-familyが指定されているのなら、font-family:の後ろの部分だけ"Midashi Min MA31″に書き代えます。フォントファミリーが指定されていないなら、{}の間に『font-family:"Midashi Min MA31″;』を追加します。

CSSはセミコロン「;」まででがひと塊なので、定義済みのものに追加する場合は、記述されている「;」の後ろに書き加えてください。

外部ファイルを使わず直接記述する場合

テストするページに直接記述するのなら、<style></style>で挟みます。

<style>
h1{font-family:"Midashi Min MA31";font-size:30px;}
p{font-family:"Ryumin Medium KL";font-size:16px;}
</style>

styleは本文ではなく<head>～</head>の中に記述することが推奨されていますが、フォント（スタイル）を適用したい文字よりも前に記述していれば機能します。とりあえず試すだけならh1タグかpタグの前に上のをコピペすれば使えるはずです。

実際に表示させる

上の<style>とh1、pをそのままコピペしたらこんな感じになります。新しいhtmlファイルにコピペすればそのまま使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.js"></script>
</head>
<body>
<style>
h1{font-family:"Midashi Min MA31";font-size:30px;}
p{font-family:"Ryumin Medium KL";font-size:16px;}
</style>
<h1>h1には見出ミンMA31、30pxを</h1>
<p>
pにはリュウミン M-KL、16pxを割り当てています。</p><p>少し離れてみたときに違いが際立ちます。
</p>
<p>
利用するフォントの種類を増やすと表示に若干時間がかかるようになります。
</p>
</body>
</html>

（利用するフォントの種類を増やすと表示に若干時間がかかるようになります）

これで好きなところに好きなフォントが使えるようになりますが、統一感を考えると使うのは3,4種類になると思います。

アプリ・ネット