HTMLとCSSを使ってサイトにWebフォントを設定することができます。
こちらは、HTMLとCSSの知識がある方向けの設定方法となります。
※初期設定がお済みでない場合は、こちらの手順にて初期設定をお願いいたします。
※HTMLとCSSについてはサポート対象外です。
※WordPressの設定状況によってご利用いただけない場合もございます。
１．フォント設定を行うWordPressのHTMLとCSSを編集します。
HEADタグの中に以下のタグを挿入してください。
<script type="text/javascript"
src="//code.typesquare.com/static/ZDbTe4IzCko%253D/ts106f.js"
charset="utf-8"></script>
src="//code.typesquare.com/static/ZDbTe4IzCko%253D/ts106f.js"
charset="utf-8"></script>
2．Webフォントを利用したい文字のCSSを編集します。
指定の30書体の中から、ご希望のfont-familyを設定してください。
■フォント一覧
|
ゴシックMB101 L
|
Gothic MB101 Light
|
|
ゴシックMB101 M
|
Gothic MB101 Medium
|
|
ゴシックMB101 B
|
Gothic MB101 DemiBold
|
|
新ゴ L
|
Shin Go Light
|
|
新ゴ M
|
Shin Go Medium
|
|
新ゴ B
|
Shin Go Bold
|
|
UD新ゴNT L
|
UD Shin Go NT Light
|
|
UD新ゴNT M
|
UD Shin Go NT Medium
|
|
UD新ゴNT B
|
UD Shin Go NT Bold
|
|
UD新ゴ コンデンス90 L
|
UD Shin Go Conde90 L
|
|
UD新ゴ コンデンス90 M
|
UD Shin Go Conde90 M
|
|
新丸ゴ L
|
Shin Maru Go Light
|
|
新丸ゴ M
|
Shin Maru Go Medium
|
|
新丸ゴ B
|
Shin Maru Go Bold
|
|
TBUD明朝 M
|
TBUDMincho M
|
|
リュウミン M-KL
|
Ryumin Medium KL
|
|
リュウミン EB-KL
|
Ryumin ExtraBold KL
|
|
UD黎ミン M
|
UD Reimin Medium
|
|
UD黎ミン EB
|
UD Reimin ExtraBold
|
|
A1明朝
|
A1 Mincho
|
|
丸フォーク R
|
Maru Folk Regular
|
|
丸フォーク B
|
Maru Folk Bold
|
|
ぽっくる
|
Pokkru-B
|
|
はるひ学園
|
Haruhi Gakuen
|
|
シネマレター
|
Cinema Letter
|
|
G2サンセリフ-B
|
GSanSerif-B
|
|
解ミン 月 B
|
Kaimin Tsuki Bold
|
|
モアリア R
|
Moaria Regular
|
|
TBカリグラゴシック R
|
TBCGothic R
|
|
新正楷書CBSK1
|
Shinsei Kaisho CBSK1
|
※フォント名が日本語の場合、もしくはスペースが入る場合は""(ダブルクォート)で囲みます。
半角英数でスペース無しの場合はそのまま記述します。
■設定例
HTML
<h2 class="content-title">記事タイトル</h2>
CSS
h2.content-title {font-family: "UD新ゴNT M";font-size:1.5rem;font-weight:bold;}