MENU
  1. ホーム
  2. 技術
  3. WordPress
  4. さくらインターネットのWebフォントをSWELLで使う

さくらインターネットのWebフォントをSWELLで使う

WordPress

いつも忘れちゃうのでメモ。別にSWELLに限ったことではなくWordPress全般で使えるはず。

基本的には「外観＞カスタマイズ＞追加CSS」に下記のように記載すれば全体のフォントが変わる。

@font-face {
	font-family: "Hiragino Maru Gothic W4 JIS2004";
}

body{
	font-family: "Hiragino Maru Gothic W4 JIS2004";
}

他の要素にも追加するのであれば適宜追加が必要。特にさくらインターネットさんのサイトにも記載があるように、font-weightが効かないのでボールドについては別途対応が必要。

さくらのサポート情報
Webフォントを設定したい | さくらのサポート情報 このマニュアルでは、Webフォント機能の設定についてご案内しています。前提条件Webフォント機能はさくらのレンタルサーバ内に設置されたWebサイト上で使用可能です。利用…
目次

入力する値

で、いつもフォントのイメージと名前の関連を忘れちゃいがちなので、「外観＞カスタマイズ＞追加CSS」に記載すべきCSSの内容とフォントの見た目の対応表。これが作りたかったのが本記事の目的。

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

関連記事

コメント

コメントする

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.

目次