さくらレンタルサーバで使えるモリサワWebフォント書式見本

さくらレンタルサーバ無料で使えるモリサワフォント書式見本

さくらのレンタルサーバではスタンダード以上のプランでモリサワの上質な日本語フォントをWebフォントとして無料で使用出来ます。

ただ、いかんせんフォントのサンプルが用意されていないためフォント選びをするには少し不便なのでさくらのレンタルサーバで使用出来るWebフォントを一覧にしました。

スポンサーリンク

利用出来るフォント名一覧

利用出来るフォント名とfont-family名の一覧です
※この文字は「丸フォーク R」を適用しています

フォント名font-family用
リュウミン M-KLRyumin Medium KL
リュウミン R-KLRyumin Regular KL
見出ミンMA31Midashi Min MA31
A1明朝A1 Mincho
新ゴ RShin Go Regular
新ゴ MShin Go Medium
ゴシックMB101 BGothic MB101 Bold
見出ゴMB31Midashi Go MB31
じゅん 201Jun 201
じゅん 501Jun 501
新丸ゴ RShin Maru Go Regular
フォーク RFolk Regular
フォーク MFolk Medium
丸フォーク RMaru Folk Regular
丸フォーク MMaru Folk Medium
カクミン RKakumin Regular
解ミン 宙 BKaimin Sora Bold
シネマレターCinema Letter
トーキングTalking
はるひ学園Haruhi Gakuen
すずむしSuzumushi
新丸ゴ 太ラインShin Maru Go Futoline
正楷書CB1Sei Kaisho CB1
隷書101Reisho 101
UD新ゴ RUD Shin Go Regular
UD新ゴ MUD Shin Go Medium
UD新ゴ コンデンス90 LUD Shin Go Conde90 L
UD新ゴ コンデンス90 MUD Shin Go Conde90 M
ナウ-GMNOW-GM
G2サンセリフ-BGSanSerif-B

引用元 Webフォント機能 – さくらのサポート情報

フォント表示サンプル(書式見本)

JavaScriptが無効の場合フォントが適用されません。

絞り込み
  • すべて
  • 明朝体
  • ゴシック体
  • 丸ゴシック体
  • デザイン書体
  • 装飾書体
  • 筆書体
  • UD書体
表示
文字サイズ px
文字色
背景色
  • 2列
  • 1列

愛のあるユニークで豊かな書体

明朝体 “リュウミン 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”

サンプルの使い方

  1. 「愛のあるユニークで豊かな書体」をクリックするとモリサワ公式サイトの該当フォントのページに移動します。そちらで好きなテキストを入力してお試しいただけます。
  2. 下の「”フォント名”,”font-family名”」をクリックすると文字列がコピーされます。
    このコードはそのままfont-familyに指定して利用できます。
Webフォントの月間利用上限に達した場合サンプルが見られなくなります。

自分のサイトに適用して確認する

TypeSquareでURLを入力する事で任意のサイトにフォントを適用してシミュレート出来ます。
モリサワ公式のサービスなので、さくらのレンタルサーバで利用出来るフォント以外も選択して試す事が可能です。

スポンサーリンク

Webフォントの利用方法

さくらのレンタルサーバでWebフォントを利用する場合、サーバコントロールパネルから利用するドメインを登録する必要があります。

登録作業を行えば即時利用可能でした。
WordPressのプラグインかHTMLに直接記述して利用する事が出来ます。

利用ドメイン登録方法

  1. サーバコントロールパネル」にログイン
  2. サイドバーの”運用に便利なツール”にある「Webフォント」ページに移動
  3. 利用するドメインを選択して「設定」ボタンを押す

WordPressで利用する

さくらのレンタルサーバ公式のWordPressプラグイン「TypeSquare Webfonts さくらのレンタルサーバ」が用意されています。
WordPressをクイックインストールしていた場合最初からインストールされた状態になっています。
インストールされていない場合、手動で追加して利用出来ます。

管理画面から簡単に設定でき「上級者向けのカスタマイズ」を設定すれば自由度も高いです。

詳しい利用方法は次のページに詳しく掲載されています!

HTMLに直接記述で利用する

HTML/CSSの記述と、Webフォントを読み込むためのScriptタグを記述する必要があります。

こちらも公式で詳しい利用方法が掲載されています。

Cocoonテーマで利用する

私はテーマ編集から追加しましたが、上述のプラグインでも簡単に利用出来ました。「上級者向けのカスタマイズ」を設定すれば記事毎に設定出来たり自由度も高いです。
以下、プラグインを利用せずに利用する方法の説明です!
  1. Scriptタグを追加する

    CocoonでWebフォント読み込み用のScriptタグを<head></head>内に読み込む場合の記述場所は2パターンあります。(どちらか一方に追加でOKです)

    <script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.js"></script>
     Cocoon設定から追加する *こっちが簡単!
    「Cocoon設定>アクセス解析・認証>その他のアクセス解析・認証コード設定>ヘッド用コード」にタグを記述
     子テーマのテーマ編集で追加する
    「外観>テーマ編集」の「temp-user/head-insert.php」ファイルの一番下に記述
  2. Webフォントを適用する

    子テーマのstyle.cssを編集して、適用したい箇所にfont-familyを設定します。
    例えば記事の見出しなら以下のように記述して設定できます。

    h1 {
        font-family:“じゅん 201″,”Jun 201”,sans-serif;
    }

    CSSの記述方法は公式ヘルプの設定例が参考になります。

  3. 以上で設定が完了です!

モリサワフォントが利用出来るレンタルサーバ

提供されているフォントに多少違いはありますが、さくらのレンタルサーバ以外にエックスサーバーお名前.comなどの有名レンタルサーバでもWEBフォントとしてモリサワフォントを無料で利用できます。

せっかく調べたので利用出来るサービスプランとフォントの種類やPV上限をまとめました。
現時点で利用制限に関してはさくらのレンタルサーバが群を抜いて優れている状況のようです。
(2019-03-09現在の情報です。ご契約の際は公式サイトで詳細をご確認ください。)

サービス内容比較

 さくらのレンタルサーバエックスサーバーお名前.com
サービスプランスタンダード以上X10/X20/X30プラン共用サーバー
書体数303030
利用可能ドメイン数311
月間PV上限7.5万PV2.5万PV2.5万PV

利用出来るモリサワフォント比較表

書体フォントさくらのレンタルサーバエックスサーバーお名前.com
明朝体A1明朝
TBUD 明朝 M
リュウミン B-KL
リュウミン M-KL
リュウミン R-KL
見出ミンMA31
黎ミン M
ゴシック体ゴシックMB101 B
ゴシックMB101 L
ゴシックMB101 M
ナウ-GM
見出ゴMB31
新ゴ B
新ゴ L
新ゴ M
新ゴ R
中ゴシックBBB
丸ゴシック体じゅん 201
じゅん 501
新丸ゴ B
新丸ゴ L
新丸ゴ M
新丸ゴ R
デザイン書体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

参考 Webフォント – レンタルサーバーはさくらインターネット
参考 Webフォント機能について | レンタルサーバー【エックスサーバー】
参考 ドメイン取るならお名前.com

あとがき

さくらのレンタルサーバのWebフォントは必要な文字のみ読み込むので比較的高速でフォントが表示されるようになっています。
最近、月間上限が2.5万PVから7.5万PVドメイン数も3つまで大幅に引き上げられ、ますます使い勝手がよくなりました。

フォントの違いで印象もガラッと変わりますし、見出し文字に利用すれば目を引くデザインを手軽に表現出来て便利ですね!

個人的に「すずむし」が好きです。
可愛らしい印象にしたいなら見出しにオススメです!

※この文字は「すずむし」を適用しています。

Pickr
Copyright (c) 2019 Simon Reinisch
MIT License https://github.com/Simonwep/pickr/blob/master/LICENSE

コメント

タイトルとURLをコピーしました