レンタルサーバ その他

【新コントロールパネル】Webフォント機能

対象プラン
さくらのレンタルサーバスタンダードプレミアムビジネスビジネスプロマネージド

このマニュアルでは、Webフォント機能の設定についてご案内しています。

前提条件・設定例

前提条件

  • Webフォント機能はさくらのレンタルサーバ内に設置されたホームページ上で使用可能です。
    利用にはコントロールパネルからドメインの登録が必要です。
    1アカウントにつき3ドメインまで 登録できます。
  • 33書体を7.5万ページビューまで表示できます。
    ビジネス、ビジネスプロ、マネージドサーバの各プランはPV制限はありません。
    ※サーバーの管理に支障をきたす場合、他のお客様に影響を及ぼすような状態が確認された場合には、一時的に制限させていただくことがあります。
  • このページではHTMLに直接タグを記述してWebフォントを表示する機能についてご説明します。
    WordPressでご利用になる場合はWordPressプラグインのサポートサイトをご覧ください。

注意事項

  • 2020年3月に追加された3書体を利用するためには、こちらのJavaScriptファイルのリンクを書き換える必要があります。

ページの先頭へ

設定手順

サーバコントロールパネルログイン

「サーバコントロールパネル」にログインします。

ドメイン名 初期ドメイン または 追加されたドメイン
パスワード サーバパスワード
仮登録完了のお知らせに記載のパスワード。
紛失・ご不明の場合は「サーバパスワードの再発行」をご確認ください。

ドメイン登録

WEBサイト/データから『Webフォント』をクリックします。

010.png

「ドメインの追加」をクリックし
Webフォントを設定するドメインを「プルダウン」より選択して『設定』をクリックします。

※ www付きのドメインでWebフォントを利用したい場合は、
プルダウンからwww無しのドメインを選択して登録することで
どちらのドメインでも利用できます。
例）example.jp を登録すると www.example.jp でも利用できます。

020.png030.png

登録ドメイン名に設定したいドメインが表示されていれば完了です。

※ドメイン登録が完了すると、すぐにWebフォントの配信が可能です。

040.png

HTML/CSSの編集

スクリプトの挿入
Webフォントを利用したいページのHTMLを編集します。
HEADタグ内に以下のタグを記述してください。

<script type="text/javascript" src="//webfonts.sakura.ne.jp/js/sakurav3.js"></script>
  • ※ </head>直前付近が最適です。
  • ※ 挿入するサイトはSSLでも非SSLでも、上記タグで対応可能です。自動的に適したプロトコルで接続します。

font-familyの設定
Webフォントを利用したい文字のcssを編集し、font-familyを適用します。

  • ※適用したCSSをサーバへアップロードした時点でWebフォントが表示されます。
  • ※HTML/CSSの編集だけではWebフォント配信が有効になりません。必ずSTEP2のドメイン登録を行ってください。
  • ※Webフォント配信を停止する場合は、変更したHTML/CSSを元に戻し、ドメイン登録を削除してください。

ページの先頭へ

設定例

HTML

<h1 class="entry-title">ページタイトル</h1>

CSS

h1.entry-title {
font-family: "リュウミン R-KL";
font-size:1.75rem;
font-weight:700;
line-height:1.25;
margin-bottom:1em;
}

  • フォント本来のウェイトで表示するため、font-weightの設定は自動的に無効となります。
    ご注意ください。
    boldで太字を適用したい場合は、boldタグのcssに対して、より太いウェイトのWebフォントを適用してください。

例

h1.entry-title b{
font-family: "リュウミン M-KL";
font-size:1.75rem;
line-height:1.25;
margin-bottom:1em;
}

ローカルでの代替フォントを指定する場合

以下のように、Webフォントの後にローカルフォントを記述します

font-family: "リュウミン R-KL" , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

font-family記述用フォント名一覧

リュウミン M-KL Ryumin Medium KL カクミン R Kakumin Regular
リュウミン R-KL Ryumin Regular KL 解ミン 宙 B Kaimin Sora Bold
見出ミンMA31 Midashi Min MA31 シネマレター Cinema Letter
A1明朝 A1 Mincho トーキング Talking
新ゴ R Shin Go Regular はるひ学園 Haruhi Gakuen
新ゴ M Shin Go Medium すずむし Suzumushi
ゴシックMB101 B Gothic MB101 Bold 新丸ゴ 太ライン Shin Maru Go Futoline
見出ゴMB31 Midashi Go MB31 正楷書CB1 Sei Kaisho CB1
じゅん 201 Jun 201 隷書101 Reisho 101
じゅん 501 Jun 501 UD新ゴ R UD Shin Go Regular
新丸ゴ R Shin Maru Go Regular UD新ゴ M UD Shin Go Medium
フォーク R Folk Regular UD新ゴ コンデンス90 L UD Shin Go Conde90 L
フォーク M Folk Medium UD新ゴ コンデンス90 M UD Shin Go Conde90 M
丸フォーク R Maru Folk Regular ナウ-GM NOW-GM
丸フォーク M Maru Folk Medium G2サンセリフ-B GSanSerif-B
しまなみ JIS2004 Shimanami JIS2004 UDデジタル教科書体 R JIS2004 UDDigiKyokasho R JIS2004
ヒラギノ丸ゴ W4 JIS2004 Hiragino Maru Gothic W4 JIS2004

※font-familyを設定する場合、フォント名が日本語の場合、もしくはスペースが入る場合は

""(ダブルクォート)

で囲う必要があります。半角英数でスペース無しの場合はそのまま記載します。

例）font-family:"リュウミン M-KL","Ryumin Medium KL",Talking

※2020年3月に3書体が追加されました。
追加書体を利用するためにはJavaScriptファイルへのリンクを変更する必要があります。

Facebookページプラグイン利用時のご注意

さくらのレンタルサーバウェブフォント機能を利用しているサイトでFacebookページプラグインを利用しようとすると
プラグインが表示されず、Facebookページが読み込まれない事象が発生します。

プラグインにウェブフォント指定が適用されているのが原因となりますので、
Facebookページプラグインのフォント指定を外すかsans-serif等一般的なフォント指定で上書きすることで回避可能です。