Webフォントを使う（エックスサーバー）

前書き

エックスサーバーでは、「モリサワ」が提供する「TypeSquare」のWebフォント（33書体）を利用出来る。
※書体の形式はそれぞれ一つ。（font-weight:bold は効かない）
※プランによっては、月毎にPVの上限がある。

エックスサーバー

目次

  1. 利用方法
  2. 実装

利用方法

サーバーパネルで、Webフォントを利用するドメインを設定する。
その後にhtmlとcssを修正する。


<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>


body{
  font-family: font name;
}

実装

以下、各Webフォントを実装しています。

Webフォントなし （sans-serif）
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

Webフォントなし （serif）
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

リュウミンR-KL
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

リュウミン B-KL
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

黎ミン M
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

A1明朝
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

しまなみ
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

新ゴ R
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

新ゴ B
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

ゴシックMB101 B
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

見出ゴMB31
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

中ゴシックBBB
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

じゅん 201
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

じゅん 501
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

新丸ゴ R
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

秀英にじみ丸ゴ B
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

丸フォーク M
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

フォーク M
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

シネマレター
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

はるひ学園
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

G2サンセリフ-B
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

那欽
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

竹 B
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

ぶらっしゅ
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

トーキング
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

すずむし
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

新ゴ シャドウ
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

教科書ICA M
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

陸隷
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

TB 古印体
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

さくらぎ蛍雪
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

TBUDゴシック R
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

TBUDゴシック E
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

UD新ゴ コンデンス90 L
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

UD新ゴ コンデンス90 M
道がつづら折りになって、いよいよ天城峠に近づいたと思う頃

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン

0123456789　<>&!#@{}"'

abcdefghijklmnopqrstuvwxyz　ABCDEFGHIJKLMNOPQRSTUVWXYZ

関連記事

可変フォントを使う（HTML/CSS）

OSに標準搭載されている和文フォントを使う（HTML/CSS）

この記事は役に立ちましたか？
送信中
トップページ
記事一覧
分類
@HTMLコーディング
@素読
@社会
@旅行
@端末
タグ
#動き#フォント#切り抜き、色#three.js#部品#スクロール#配置#レスポンシブ#表示速度#データ#PHP#縦書き
#教訓#詔#和歌#祝詞
#拉致事件#国土
#慰霊#パソコンの使い方
日本製まとめサイト ホームページ制作
↑先頭に戻る
↑目次に戻る
ページの先頭に戻る