さくらのレンタルサーバでWeb フォントが使えるようになっていた。
モリサワのWebフォントを無料で利用可能だそうだ。Webフォントは使用料が高そうで今まで使っていなかったがこれなら大丈夫だ。
まずドメイン登録をしないといけないんだ。WordPressならプラグインとして利用可能ということだ。
僕がメインで使っているのは、Movable Type なので、HTMLに直接記述して利用しなくはいけないようだ。
HEADタグ内に以下のタグを記述
<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.js"></script>
ont-familyの設定
Webフォントを利用したい文字のcssを編集し、font-familyを適用します。
※適用したCSSをサーバへアップロードした時点でWebフォントが表示されます。
※HTML/CSSの編集だけではWebフォント配信が有効になりません。必ずSTEP2のドメイン登録を行ってください。
※Webフォント配信を停止する場合は、変更したHTML/CSSを元に戻し、ドメイン登録を削除してください。
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;
}
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 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
