Jump to the content

さくらのレンタルサーバでモリサワのWebフォントが無料で使えるって知らないの!?

Server

    さくらのレンタルサーバでモリサワのWebフォントが無料で使えるって知らないの!?

    どうも、イソップです。

    ニュースです。

    今月14日から、さくらのレンサバのスタンダードプラン以上と、さくらのマネージドサーバで、モリサワのWebフォントが月25000PVまで無料で使えるようになりました。 今までWordPressでは使えてたんですが、CMSじゃなくても使えるように機能拡張されたんです。これは超ステキですっ!

    月25000PVですよ? 個人のブログとかポートフォリオサイトに使うんだったらちょうどいいじゃないですか! デザイナーさんもモリサワのフォントはよく使うから、これは嬉しいですよね!!

    今日は、さくらのレンサバでモリサワのWebフォントを使う方法を紹介します。

    Webフォントを利用できるプラン

    対象プラン

    さくらのレンサバでは、スタンダードプラン以上。それに、さくらのマネージドサーバでも利用できます。
    スタンダードプランは、月額515円。

    使える書体は30種類

    明朝体リュウミン R-KL / リュウミン M-KL / 見出しミンMA31 / A1明朝
    ゴシック体新ゴ R / 新ゴ M / ゴシックMB101 B / 見出しゴMB31 / ナウ-GM
    丸ゴシック体じゅん 201 / じゅん 501 / 新丸ゴ
    デザイン書体フォーク R / フォーク M / 丸フォーク R / 丸フォーク M / カクミン R / 解ミン 宙 B / シネマレター / トーキング / はるひ学園 / すずむし / G2サンセリフ-B
    装飾書体新丸ゴ 太ライン
    筆書体正楷書CB1 / 隷書101
    UD書体UD新ゴ R / UD新ゴ M / UD新ゴ コンデンス90 L / UD新ゴ コンデンス90 M

    リュウミンや新ゴやMB101、それにフォークなんかも使えます。 これはありがたいですね〜。

    設定方法は簡単

    HTMLでWebフォントを設定する場合について説明します。
    WordPressで使用したい方はこちらを参照してください。

    ※すでにスタンダードプラン以上の契約がされている前提です。 契約しておきたい人は、さくらインターネットで。

    サーバコントロールパネルでドメインを設定する

    1. コントロールパネルにログインします

    コントロールパネル

    2. 左メニューの「Webフォント」をクリック

    メニューのWebフォント

    3. 「* Webフォント利用ドメインの設定 *」でWebフォントを設定するドメインを選択します

    独自ドメインを選択

    プルダウン選択後は「設定ボタン」をクリックします。

    4. 登録ドメイン名に設定されればOK

    設定確認

    サーバコントロールパネルでの設定はこれでおしまいです。

    HTMLとCSSの設定

    1. スクリプトタグを配置します

    <head>
        ...
        <script type="text/javascript" src="//webfonts.sakura.ne.jp/js/sakura.js"></script>
    </head>
    <body>
        <h1>テキスト</h1>
    </body>
    

    2. CSSでフォントを指定します

    h1 { 
        font-family: "リュウミン R-KL", serif;
    }
    

    font-weightは効かないため、太字にする場合はより太いフォントを指定します。

    3. さくらサーバーへHTML/CSSファイルをアップロード

    これで、Webフォントが適用されます。

    フォント名一覧

    以下のフォント名が、font-family に指定できます。

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

    日本語名でも英語名でもどちらでも指定可能です。 日本語名を指定する場合は、""(ダブルクォーテーション)で囲みましょう。

    実務ではこんな使い方も

    コーディング時にデザイナーさんとのやり取りで、「Webフォントを試しながら決めたい」と要望があったので、 この機能を使ってプレビューしながら仕事を進めました。

    モリサワ本家のフリープランでは、1書体のみ、月間10000PV分無料で使うこともできますが、 もしさくらのレンサバを自社のテストサイトとして使っているようなら、こういう使い方もできますよ。

    30書体あるので、一度に複数試すことができます。

    まとめ

    モリサワのWebフォントが使えるようになったさくらのレンサバは、ブログやポートフォリオサイト、個人プロジェクトに使いやすいと思います。 もしサーバ選びで迷っているようだったら、さくらのレンサバを検討してみてはいかがでしょうか。

    このブログもさくらのレンサバに置こうかな〜。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×