ご利用ガイドWebフォント設定をする

目次

ConoHa WINGではモリサワフォント提供のフォントをWebサイトで利用することができます。

ご利用についてはアカウント内でサブドメインを含めて3ドメインとなります。

Webフォントの設定方法

[1] コントロールパネルへログインします。

[2] 上部メニューの「WING」をクリックします。

STEP1

[3] 左メニューの「サイト管理」をクリックします。

STEP2

[4] サイト管理画面の左メニューで「サイト設定」を開きます。

STEP3

[5] 上のタブから「基本設定」を開きます。

STEP4

[6] 「Webフォント」を開いて、「利用設定」を「ON」にします。

STEP5

※Webフォントはサブドメインを含めて3ドメイン利用可能です。

ドメインの切り替えが必要な場合はサイト管理左メニューの「切り替え」ボタンから変更します。ドメインの切り替えについては下記のガイドをご確認ください。

ドメインを切り替える

Webフォントの利用方法

[1] Webフォントの利用については利用設定ををONにしたドメインのWebサイトのhtmlファイル、CSSファイル内のHEADタグの中に次の内容のタグを挿入します。

<script type="text/javascript"
src="//code.typesquare.com/static/5b0e3c4aee6847bda5a036abac1e024a/typesquare.js"
charset="utf-8"></script>

[2] HTMLタグをフォントを指定の上挿入します。設定例としては次のようになります。


HTML

<h2 class="title">ConoHa WING Webフォント</h2>

CSS

h2.title { 
font-family: "DSダダ";
font-size:1.5rem; 
font-weight:bold; 
}

[3] ご利用が可能なフォントは次のものとなります。
※フォント名が日本語もしくはフォント名内にスペースがある場合はタグ挿入の際、フォント名はダブルクォテーション("")で囲みます。半角英数かつスペースが無い場合はそのまま挿入します。



フォント一覧

・A1明朝/A1 Mincho
・リュウミン R-KL/Ryumin Regular KL
・ゴシックMB101 M/Gothic MB101 Medium
・ゴシックMB101 B/Gothic MB101 Bold
・新ゴ R/Shin Go Regular
・見出ゴMB31/Midashi Go MB31
・ヒラギノ角ゴ W2 JIS2004/Hiragino Kaku Gothic W2 JIS2004
・じゅん 201/Jun 201
・じゅん 501/Jun 501
・新丸ゴ R/Shin Maru Go Regular
・キャピーN R/CapieN Regular
・UD新ゴ コンデンス90 L/UD Shin Go Conde90 L
・UD新ゴ コンデンス90 R/UD Shin Go Conde90 R
・UD黎ミン R/UD Reimin Regular
・UD黎ミン B/UD Reimin Bold
・TBUDゴシック R/TBUDGothic R
・TBUDゴシック E/TBUDGothic E
・丸フォーク R/Maru Folk Regular
・フォーク R/Folk Regular
・はるひ学園/Haruhi Gakuen
・シネマレター/Cinema Letter
・G2サンセリフ-B/GSanSerif-B
・すずむし/Suzumushi
・トーキング/Talking
・ハルクラフト/Harucraft
・那欽/Nachin
・陸隷/Likurei
・新ゴ 太ライン/Shin Go Futoline
・DSダダ/DS-dada
・DSそよ風/DS-soyokaze

WordPressでWebフォントを利用する方法

WordPressでもHTML、CSSにタグを挿入することでWebフォントを利用出来ますが、プラグインを利用することで便利に設定することが出来ます。

[1] インストールしているWordPressのダッシュボードにログインします。
※WordPressのインストールについては下記のガイドをご確認ください。

WordPressをインストールする
WordPressかんたん移行を利用する

STEP6

[2] 左メニューの「プラグイン」をクリックします。

STEP7

[3] プラグインのリストで「TypeSquare Webfonts for ConoHa」を「有効化」します。

STEP8

[4] 左のメニューに「TypeSquare Webfonts」が追加されるのでクリックします。

STEP9

[5] プルダウンからフォントテーマを選択して、「フォントテーマを更新する」をクリックします。

STEP10

[6] 選択したフォントテーマで詳細な設定をする場合は「上級者向けのカスタマイズ」をクリックします。
「フォント設定クラス」ではテーマ内各タグに設定されているフォントを適用するクラスを指定します。
「個別記事フォント設定」を有効化すると記事ごとにフォントテーマを設定するようになります。

STEP11

問題は解決できましたか?

ご回答ありがとうございます。

ご回答受け付けました。ご協力ありがとうございました。