TypeSquare Webfonts for お名前.com

HOME

コントロールパネル

カスタム設定

モリサワWebフォントをHTMLとCSSを使ってサイトに利用することができます。

※HTMLとCSSの知識がある、上級者向けの活用ガイドです。

※カスタム設定についてはサポート対象外です。サイトの状況によってご利用いただけない場合もございます。  

 

共用サーバーSDのコントロールパネルにログインし、[Webフォント]をクリックします。              

 

 

 

 

 

 

 

WebフォントURL設定画面から[設定]をクリックします。 

WebフォントURL変更画面の[変更後URL]からご希望のURLを選択し、規約に同意したら、[確認画面へ進む]をクリックします。 

内容にお間違えがなければ、[決定]ボタンをクリックします。 

 

   


          

 

 

 

 

 

次に、②で設定したサイトのHTMLとCSSを編集します。HEADタグの中に以下のタグを挿入してください。

<script type="text/javascript"
src="//code.typesquare.com/static/ZDbTe4IzCko%253D/ts106f.js"
charset="utf-8"></script>
   
 
 
 
 
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; 
}