206134982
201919531

Webフォント機能

対象サービス・プラン
 

ここではWebフォント機能の設定を紹介します。

前提条件

  • Webフォント機能はさくらのレンタルサーバ内に設置されたホームページ上で使用可能です。
    利用にはコントロールパネルからドメインの登録が必要です。
  • 30書体を2.5万ページビューまで表示できます。
  • このページではHTMLに直接タグを記述してWebフォントを表示する機能についてご説明します。
    WordPressでご利用になる場合はWordPressプラグインのサポートサイトをご覧ください。

ページの先頭へ

設定手順

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

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

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

ドメイン登録

『Webフォント』をクリックします。

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

登録ドメイン名に設定したいドメインが表示されていれば完了です。
※ドメイン登録が完了すると、すぐにWebフォントの配信が可能になります。

HTML/CSSの編集

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

<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.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", "MS P明朝", "MS 明朝", 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

※font-familyを設定する場合、フォント名が日本語の場合、もしくはスペースが入る場合は""(ダブルクォート)で囲う必要があります。
半角英数でスペース無しの場合はそのまま記載します。

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

さくらのサポート情報

メニューを閉じる