静的webページでも使えるようになったさくらのモリサワwebフォント30書体一覧

さくらサーバより転出したため、フォント一覧はきちんと表示されなくなっています

これまでWordPress用プラグインとして提供されてきた、さくらインターネットの無料モリサワwebフォントサービスが、静的webページにも使えるようになったらしいので、さっそく試してみました。

ASCII.jp:さくら、モリサワのWebフォントの無料利用をWordPress以外に拡大

利用条件は2.5万PVまでで一契約につき1ドメインまでで、さくらレンタルサーバのスタンダード以上という変わっておらず、WordPressプラグインがなくてもタグを挿入するだけで使えるようになったというもの。

導入ヘルプページをみると、さくらの用意したjavascript読み込んだら、あとはCSSでfont-familyを指定するだけでいいみたい。

<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.js"></script>
さくらインターネットのモリサワフォントを静的htmlで使う方法
さくらインターネットのモリサワフォントを静的htmlで使う方法
さくらインターネットで無料で使えるモリサワフォントをWordPressのプラグインを使わずに利用する方法です。サービス開始直後はWordPressのプラグインが...

で、このスクリプトはワードプレスプラグインを導入していればサイト全体に適用されているので、すでに使っているなら個別のページへの記述は不要です。つまりWordPressプラグインを使っていれば、スタイルシートでフォント指定するだけで好きに使えるようになるということ。

ひとつだけ注意点があって、「font-weight」は無効にされることです。実際にやってみるとfont-weightは無視されています。

リュウミン M-KLのweight:100weight:800です。

プラグインだと4種類しか指定できないために比較が難しかったですが、これなら一覧表示も楽。というわけで、利用できる30書体分全てを自分がよく使うサイズで表示させました。


line-heightは1.6です。

1.Ryumin Medium KL
リュウミン M-KL "Ryumin Medium KL" 30px
リュウミン M-KL "Ryumin Medium KL" 24px
リュウミン M-KL "Ryumin Medium KL" 16px
リュウミン M-KL "Ryumin Medium KL" 14px
リュウミン M-KL "Ryumin Medium KL" 12px

2.Ryumin Regular KL
リュウミン R-KL "Ryumin Regular KL" 30px
リュウミン R-KL "Ryumin Regular KL" 24px
リュウミン R-KL "Ryumin Regular KL" 16px
リュウミン R-KL "Ryumin Regular KL" 14px
リュウミン R-KL "Ryumin Regular KL" 12px

3.Midashi Min MA31
見出ミンMA31 "Midashi Min MA31" 30px
見出ミンMA31 "Midashi Min MA31" 24px
見出ミンMA31 "Midashi Min MA31" 16px
見出ミンMA31 "Midashi Min MA31" 14px
見出ミンMA31 "Midashi Min MA31" 12px

4.A1 Mincho
A1明朝 A1 "A1 Mincho" 30px
A1明朝 A1 "A1 Mincho" 24px
A1明朝 A1 "A1 Mincho" 16px
A1明朝 A1 "A1 Mincho" 14px
A1明朝 A1 "A1 Mincho" 12px

5.Shin Go Regular
新ゴ R "Shin Go Regular" 30px
新ゴ R "Shin Go Regular" 24px
新ゴ R "Shin Go Regular" 16px
新ゴ R "Shin Go Regular" 14px
新ゴ R "Shin Go Regular" 12px

6.Shin Go Medium
新ゴ M "Shin Go Medium" 30px
新ゴ M "Shin Go Medium" 24px
新ゴ M "Shin Go Medium" 16px
新ゴ M "Shin Go Medium" 14px
新ゴ M "Shin Go Medium" 12px

7.Gothic MB101 Bold
ゴシックMB101 B "Gothic MB101 Bold" 30px
ゴシックMB101 B "Gothic MB101 Bold" 24px
ゴシックMB101 B "Gothic MB101 Bold" 16px
ゴシックMB101 B "Gothic MB101 Bold" 14px
ゴシックMB101 B "Gothic MB101 Bold" 12px

8.Midashi Go MB31
見出ゴMB31 "Midashi Go MB31" 30px
見出ゴMB31 "Midashi Go MB31" 24px
見出ゴMB31 "Midashi Go MB31" 16px
見出ゴMB31 "Midashi Go MB31" 14px
見出ゴMB31 "Midashi Go MB31" 12px

9.Jun 201
じゅん 201 "Jun 201" 30px
じゅん 201 "Jun 201" 24px
じゅん 201 "Jun 201" 16px
じゅん 201 "Jun 201" 14px
じゅん 201 "Jun 201" 12px

10.Jun 501
じゅん 501 "Jun 501" 30px
じゅん 501 "Jun 501" 24px
じゅん 501 "Jun 501" 16px
じゅん 501 "Jun 501" 14px
じゅん 501 "Jun 501" 12px

11.Shin Maru Go Regular
新丸ゴ R "Shin Maru Go Regular" 30px
新丸ゴ R "Shin Maru Go Regular" 24px
新丸ゴ R "Shin Maru Go Regular" 16px
新丸ゴ R "Shin Maru Go Regular" 14px
新丸ゴ R "Shin Maru Go Regular" 12px

12.Folk Regular
フォーク R "Folk Regular" 30px
フォーク R "Folk Regular" 24px
フォーク R "Folk Regular" 16px
フォーク R "Folk Regular" 14px
フォーク R "Folk Regular" 12px

13.Folk Medium
フォーク M "Folk Medium" 30px
フォーク M "Folk Medium" 24px
フォーク M "Folk Medium" 16px
フォーク M "Folk Medium" 14px
フォーク M "Folk Medium" 12px

14.Maru Folk Regular
丸フォーク R "Maru Folk Regular" 30px
丸フォーク R "Maru Folk Regular" 24px
丸フォーク R "Maru Folk Regular" 16px
丸フォーク R "Maru Folk Regular" 14px
丸フォーク R "Maru Folk Regular" 12px

15.Maru Folk Medium
丸フォーク M "Maru Folk Medium" 30px
丸フォーク M "Maru Folk Medium" 24px
丸フォーク M "Maru Folk Medium" 16px
丸フォーク M "Maru Folk Medium" 14px
丸フォーク M "Maru Folk Medium" 12px

16.Kakumin Regular
カクミン R "Kakumin Regular" 30px
カクミン R "Kakumin Regular" 24px
カクミン R "Kakumin Regular" 16px
カクミン R "Kakumin Regular" 14px
カクミン R "Kakumin Regular" 12px

17.Kaimin Sora Bold
解ミン 宙 B "Kaimin Sora Bold" 30px
解ミン 宙 B "Kaimin Sora Bold" 24px
解ミン 宙 B "Kaimin Sora Bold" 16px
解ミン 宙 B "Kaimin Sora Bold" 14px
解ミン 宙 B "Kaimin Sora Bold" 12px

18.Cinema Letter
シネマレター "Cinema Letter" 30px
シネマレター "Cinema Letter" 24px
シネマレター "Cinema Letter" 16px
シネマレター "Cinema Letter" 14px
シネマレター "Cinema Letter" 12px

19.Talking
トーキング "Talking" 30px
トーキング "Talking" 24px
トーキング "Talking" 16px
トーキング "Talking" 14px
トーキング "Talking" 12px

20.Haruhi Gakuen
はるひ学園 "Haruhi Gakuen" 30px
はるひ学園 "Haruhi Gakuen" 24px
はるひ学園 "Haruhi Gakuen" 16px
はるひ学園 "Haruhi Gakuen" 14px
はるひ学園 "Haruhi Gakuen" 12px

21.すずむし"Suzumushi"
すずむし"Suzumushi" 30px
すずむし"Suzumushi" 24px
すずむし"Suzumushi" 16px
すずむし"Suzumushi" 14px
すずむし"Suzumushi" 12px

22.Shin Maru Go Futoline
新丸ゴ 太ライン "Shin Maru Go Futoline" 30px
新丸ゴ 太ライン "Shin Maru Go Futoline" 24px
新丸ゴ 太ライン "Shin Maru Go Futoline" 16px
新丸ゴ 太ライン "Shin Maru Go Futoline" 14px
新丸ゴ 太ライン "Shin Maru Go Futoline" 12px

23.Sei Kaisho CB1
正楷書CB1 "Sei Kaisho CB1" 30px
正楷書CB1 "Sei Kaisho CB1" 24px
正楷書CB1 "Sei Kaisho CB1" 16px
正楷書CB1 "Sei Kaisho CB1" 14px
正楷書CB1 "Sei Kaisho CB1" 12px

24.Reisho 101
隷書101 "Reisho 101" 30px
隷書101 "Reisho 101" 24px
隷書101 "Reisho 101" 16px
隷書101 "Reisho 101" 14px
隷書101 "Reisho 101" 12px

25.UD Shin Go Regular
UD新ゴ R "UD Shin Go Regular" 30px
UD新ゴ R "UD Shin Go Regular" 24px
UD新ゴ R "UD Shin Go Regular" 16px
UD新ゴ R "UD Shin Go Regular" 14px
UD新ゴ R "UD Shin Go Regular" 12px

26.UD Shin Go Medium
UD新ゴ M "UD Shin Go Medium" 30px
UD新ゴ M "UD Shin Go Medium" 24px
UD新ゴ M "UD Shin Go Medium" 16px
UD新ゴ M "UD Shin Go Medium" 14px
UD新ゴ M "UD Shin Go Medium" 12px

27.UD Shin Go Conde90 L
UD新ゴ コンデンス90 L "UD Shin Go Conde90 L" 30px
UD新ゴ コンデンス90 L "UD Shin Go Conde90 L" 24px
UD新ゴ コンデンス90 L "UD Shin Go Conde90 L" 16px
UD新ゴ コンデンス90 L "UD Shin Go Conde90 L" 14px
UD新ゴ コンデンス90 L "UD Shin Go Conde90 L" 12px

28.UD Shin Go Conde90 M
UD新ゴ コンデンス90 M "UD Shin Go Conde90 M" 30px
UD新ゴ コンデンス90 M "UD Shin Go Conde90 M" 24px
UD新ゴ コンデンス90 M "UD Shin Go Conde90 M" 16px
UD新ゴ コンデンス90 M "UD Shin Go Conde90 M" 14px
UD新ゴ コンデンス90 M "UD Shin Go Conde90 M" 12px

29.NOW-GM
ナウ-GM "NOW-GM" 30px
ナウ-GM "NOW-GM" 24px
ナウ-GM "NOW-GM" 16px
ナウ-GM "NOW-GM" 14px
ナウ-GM "NOW-GM" 12px

30.GSanSerif-B
G2サンセリフ-B "GSanSerif-B" 30px
G2サンセリフ-B "GSanSerif-B" 24px
G2サンセリフ-B "GSanSerif-B" 16px
G2サンセリフ-B "GSanSerif-B" 14px
G2サンセリフ-B "GSanSerif-B" 12px

WordPressのプラグインを試したのはつい数日前なので、個人的にはこのタイミングはいいんだか悪いんだかという感じです。

でも、3か月も経たずにユーザーが使いやすい方向に進んだということは、今後はさらに使いやすくしてくれることを期待していいかも。

スポンサーリンク
336
336

シェアする

フォローする