さくらのレンタルサーバ
ではスタンダード以上のプランでモリサワの上質な日本語フォントをWebフォントとして無料で使用出来ます。
ただ、いかんせんフォントのサンプルが用意されていない※ためフォント選びをするには少し不便なのでさくらのレンタルサーバで使用出来るWebフォントを一覧にしました。
当記事は文字のサイズ・色変えを試したり、フォント名のクリックコピー・モリサワ公式ページへのリンク・他サービスとの書体比較等の参考にご活用いただければと思います。
フォント表示サンプル(書式見本)
| 絞り込み | |
|---|---|
| 表示 | 文字サイズ px 文字色 背景色
|
明朝体 “しまなみ JIS2004″,”Shimanami JIS2004”
UD書体 “UDデジタル教科書体 R JIS2004″,”UDDigiKyokasho R JIS2004”
丸ゴシック体 “ヒラギノ丸ゴ W4 JIS2004″,”Hiragino Maru Gothic W4 JIS2004”
明朝体 “リュウミン M-KL”,”Ryumin Medium KL”
明朝体 “リュウミン R-KL”,”Ryumin Regular KL”
明朝体 “見出ミンMA31″,”Midashi Min MA31”
明朝体 “A1明朝”,”A1 Mincho”
ゴシック体 “新ゴ R”,”Shin Go Regular”
ゴシック体 “新ゴ M”,”Shin Go Medium”
ゴシック体 “ゴシックMB101 B”,”Gothic MB101 Bold”
ゴシック体 “見出ゴMB31″,”Midashi Go MB31”
丸ゴシック体 “じゅん 201″,”Jun 201”
丸ゴシック体 “じゅん 501″,”Jun 501”
丸ゴシック体 “新丸ゴ R”,”Shin Maru Go Regular”
デザイン書体 “フォーク R”,”Folk Regular”
デザイン書体 “フォーク M”,”Folk Medium”
デザイン書体 “丸フォーク R”,”Maru Folk Regular”
デザイン書体 “丸フォーク M”,”Maru Folk Medium”
デザイン書体 “カクミン R”,”Kakumin Regular”
デザイン書体 “解ミン 宙 B”,”Kaimin Sora Bold”
デザイン書体 “シネマレター”,”Cinema Letter”
デザイン書体 “トーキング”,”Talking”
デザイン書体 “はるひ学園”,”Haruhi Gakuen”
デザイン書体 “すずむし”,”Suzumushi”
装飾書体 “新丸ゴ 太ライン”,”Shin Maru Go Futoline”
筆書体 “正楷書CB1″,”Sei Kaisho CB1”
筆書体 “隷書101″,”Reisho 101”
UD書体 “UD新ゴ R”,”UD Shin Go Regular”
UD書体 “UD新ゴ M”,”UD Shin Go Medium”
UD書体 “UD新ゴ コンデンス90 L”,”UD Shin Go Conde90 L”
UD書体 “UD新ゴ コンデンス90 M”,”UD Shin Go Conde90 M”
ゴシック体 “ナウ-GM”,”NOW-GM”
デザイン書体 “G2サンセリフ-B”,”GSanSerif-B”
サンプルの操作方法
- 「愛のあるユニークで豊かな書体」をクリックするとモリサワ公式サイトの該当フォントのページに移動します。そちらで好きなテキストを入力してお試しいただけます。
- 下の「”フォント名”,”font-family名”」をクリックすると文字列がコピーされます。
このコードはそのままfont-familyに指定して利用できます。
見られない時用のスクリーンショット
自分のサイトに適用して確認する
TypeSquareでURLを入力する事で任意のサイトにフォントを適用してシミュレート出来ます。
モリサワ公式のサービスなので、さくらのレンタルサーバで利用出来るフォント以外も選択して試す事が可能です。
利用出来るフォント名一覧
利用出来るフォント名とfont-family名の一覧です
※この文字は「丸フォーク R」を適用しています
| フォント名 | font-family用 |
|---|---|
| しまなみ JIS2004 | Shimanami JIS2004 |
| UDデジタル教科書体 R JIS2004 | UDDigiKyokasho R JIS2004 |
| ヒラギノ丸ゴ W4 JIS2004 | Hiragino Maru Gothic W4 JIS2004 |
| リュウミン M-KL | Ryumin Medium KL |
| リュウミン R-KL | Ryumin Regular KL |
| 見出ミンMA31 | Midashi Min MA31 |
| A1明朝 | A1 Mincho |
| 新ゴ R | Shin Go Regular |
| 新ゴ M | Shin Go Medium |
| ゴシックMB101 B | Gothic MB101 Bold |
| 見出ゴMB31 | Midashi Go MB31 |
| じゅん 201 | Jun 201 |
| じゅん 501 | Jun 501 |
| 新丸ゴ R | Shin Maru Go Regular |
| フォーク R | Folk Regular |
| フォーク M | Folk Medium |
| 丸フォーク R | Maru Folk Regular |
| 丸フォーク M | Maru Folk Medium |
| カクミン R | Kakumin Regular |
| 解ミン 宙 B | Kaimin Sora Bold |
| シネマレター | Cinema Letter |
| トーキング | Talking |
| はるひ学園 | Haruhi Gakuen |
| すずむし | Suzumushi |
| 新丸ゴ 太ライン | Shin Maru Go Futoline |
| 正楷書CB1 | Sei Kaisho CB1 |
| 隷書101 | Reisho 101 |
| UD新ゴ R | UD Shin Go Regular |
| UD新ゴ M | UD Shin Go Medium |
| UD新ゴ コンデンス90 L | UD Shin Go Conde90 L |
| UD新ゴ コンデンス90 M | UD Shin Go Conde90 M |
| ナウ-GM | NOW-GM |
| G2サンセリフ-B | GSanSerif-B |
Webフォントの利用方法
さくらのレンタルサーバでWebフォントを利用する場合、サーバコントロールパネルから利用するドメインを登録する必要があります。
登録作業を行えば即時利用可能でした。
WordPressのプラグインかHTMLに直接記述して利用する事が出来ます。
利用ドメイン登録方法
- 「サーバコントロールパネル」にログイン
- サイドバーの”運用に便利なツール”にある「Webフォント」ページに移動
- 利用するドメインを選択して「設定」ボタンを押す
WordPressで利用する
さくらのレンタルサーバ公式のWordPressプラグイン「TypeSquare Webfonts さくらのレンタルサーバ」が用意されています。
WordPressをクイックインストールしていた場合最初からインストールされた状態になっています。
インストールされていない場合、手動で追加して利用出来ます。
管理画面から簡単に設定でき「上級者向けのカスタマイズ」を設定すれば自由度も高いです。
詳しい利用方法は次のページに詳しく掲載されています！
HTMLに直接記述で利用する
HTML/CSSの記述と、Webフォントを読み込むためのScriptタグを記述する必要があります。
こちらも公式で詳しい利用方法が掲載されています。
Cocoonテーマで利用する
- Scriptタグを追加する
CocoonでWebフォント読み込み用のScriptタグを
<head></head>内に読み込む場合の記述場所は2パターンあります。(どちらか一方に追加でOKです)<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakurav3.js"></script>
- Cocoon設定から追加する *こっちが簡単！
- 「Cocoon設定＞アクセス解析・認証＞その他のアクセス解析・認証コード設定＞ヘッド用コード」にタグを記述
- 子テーマのテーマ編集で追加する
- 「外観＞テーマ編集」の「temp-user/head-insert.php」ファイルの一番下に記述
- Webフォントを適用する
子テーマのstyle.cssを編集して、適用したい箇所にfont-familyを設定します。
例えば記事の見出しなら以下のように記述して設定できます。h1 { font-family:“じゅん 201″,”Jun 201”,sans-serif; }CSSの記述方法は公式ヘルプの設定例が参考になります。
- 以上で設定が完了です！
モリサワフォントが利用出来るレンタルサーバ
提供されているフォントに多少違いはありますが、さくらのレンタルサーバ以外にエックスサーバー
やお名前.com
などの有名レンタルサーバでもWEBフォントとしてモリサワフォントを無料で利用できます。
せっかく調べたので利用出来るサービスプランとフォントの種類やPV上限をまとめました。
現時点で利用制限に関してはさくらのレンタルサーバが群を抜いて優れている状況のようです。
(2019-03-09現在の情報です。ご契約の際は公式サイトで詳細をご確認ください。)
、お名前.comも1ドメイン→３ドメイン・2.5万PV→7.5万PVになり、書体数含めさくらのレンタルサーバとサービス内容に差が無くなったようです。サービス内容比較
2020-03-11更新
| さくらのレンタルサーバ | エックスサーバー | お名前.com | |
|---|---|---|---|
| サービスプラン | スタンダード以上 | X10/X20/X30プラン | 共用サーバー |
| 書体数 | 33 | 33 | 33 |
| 利用可能ドメイン数 | 3 | 3 | 3 |
| 月間PV上限 | 7.5万PV | 7.5万PV | 7.5万PV |
利用出来るモリサワフォント比較表
2020-03-11更新
| 書体 | フォント | さくらのレンタルサーバ | エックスサーバー | お名前.com |
|---|---|---|---|---|
| 明朝体 | A1明朝 | ○ | ○ | ○ |
| TBUD 明朝 Ｍ | ○ | |||
| リュウミン B-KL | ○ | ○ | ||
| リュウミン M-KL | ○ | ○ | ||
| リュウミン R-KL | ○ | ○ | ||
| 見出ミンMA31 | ○ | |||
| 黎ミン M | ○ | |||
| しまなみ | ○ | ○ | ||
| ゴシック体 | ゴシックMB101 B | ○ | ○ | ○ |
| ゴシックMB101 L | ○ | |||
| ゴシックMB101 M | ○ | |||
| ナウ-GM | ○ | |||
| 見出ゴMB31 | ○ | ○ | ○ | |
| 新ゴ B | ○ | ○ | ||
| 新ゴ L | ○ | |||
| 新ゴ M | ○ | ○ | ||
| 新ゴ R | ○ | ○ | ||
| 中ゴシックBBB | ○ | ○ | ||
| ヒラギノ角ゴ W3 JIS2004 | ○ | |||
| 丸ゴシック体 | じゅん 201 | ○ | ○ | |
| じゅん 501 | ○ | ○ | ||
| 新丸ゴ B | ○ | |||
| 新丸ゴ L | ○ | |||
| 新丸ゴ M | ○ | |||
| 新丸ゴ R | ○ | ○ | ||
| ヒラギノ丸ゴ W4 | ○ | |||
| 秀英にじみ丸ゴ B | ○ | |||
| デザイン書体 | G2サンセリフ-B | ○ | ○ | ○ |
| TBカリグラゴシック R | ○ | |||
| カクミン R | ○ | |||
| シネマレター | ○ | ○ | ○ | |
| すずむし | ○ | ○ | ||
| トーキング | ○ | ○ | ||
| はるひ学園 | ○ | ○ | ○ | |
| フォーク M | ○ | ○ | ||
| フォーク R | ○ | |||
| ぶらっしゅ | ○ | |||
| ぽっくる | ○ | |||
| モアリア R | ○ | |||
| 解ミン 宙 B | ○ | |||
| 解ミン月 B | ○ | |||
| 丸フォーク B | ○ | |||
| 丸フォーク M | ○ | ○ | ||
| 丸フォーク R | ○ | ○ | ||
| 竹 B | ○ | |||
| 那欽 | ○ | |||
| 装飾書体 | 新ゴ シャドウ | ○ | ||
| 新丸ゴ 太ライン | ○ | |||
| 筆書体 | TB古印体 | ○ | ||
| 教科書ICA M | ○ | |||
| 新正楷書 CBSK1 | ○ | |||
| 正楷書CB1 | ○ | |||
| 陸隷 | ○ | |||
| 隷書101 | ○ | |||
| さくらぎ蛍雪 | ○ | |||
| UD書体 | TBUDゴシック E | ○ | ||
| TBUDゴシック R | ○ | |||
| UD新ゴ M | ○ | |||
| UD新ゴ NT B | ○ | |||
| UD新ゴ NT L | ○ | |||
| UD新ゴ NT M | ○ | |||
| UD新ゴ R | ○ | |||
| UD新ゴ コンデンス90 L | ○ | ○ | ○ | |
| UD新ゴ コンデンス90 M | ○ | ○ | ○ | |
| UD黎ミン B | ○ | |||
| UD黎ミン M | ○ | |||
| UDデジタル教科書体 R | ○ |
参考 Webフォント – レンタルサーバーはさくらインターネット
参考 Webフォント機能について | レンタルサーバー【エックスサーバー】
参考 ドメイン取るならお名前.com
あとがき
さくらのレンタルサーバのWebフォントは必要な文字のみ読み込むので比較的高速でフォントが表示されるようになっています。
最近、月間上限が2.5万PVから7.5万PVドメイン数も3つまで大幅に引き上げられ、ますます使い勝手がよくなりました。
フォントの違いで印象もガラッと変わりますし、見出し文字に利用すれば目を引くデザインを手軽に表現出来て便利ですね！
個人的に「解ミン 宙 B」「すずむし」が好きです。
可愛らしい印象にしたいなら見出しにオススメです！
※この文字は「解ミン 宙 B」を適用しています。
Copyright (c) 2019 Simon Reinisch
MIT License https://github.com/Simonwep/pickr/blob/master/LICENSE
