マニュアル

  1. ホーム
  2. マニュアル
  3. HTML記述形式でのご利用

HTML記述形式でのご利用

本機能のご利用に関して

  • 33書体を月間7.5万PVまでご利用いただけます。
    また、月間7.5万PVを超える場合、Webフォントの適用は外れますが、ブラウザ標準でのフォント表示に戻る為、表示内容に影響はありません。
  • 利用可能な書体以外を指定することはできません。
  • お客様が編集されたプログラム等に関する技術的内容のお問い合わせについてはサポート対象外です。
    また、サイトの状況によってご利用いただけない場合もあります。

サーバーパネルにログインし、「Webフォント設定」をクリックします。

設定対象ドメインを確認して、「Webフォント設定」をクリック

「Webフォント設定の追加」のプルダウンメニューより設定するドメインを選択し「設定する」ボタンクリックしてください。

Webフォントを設定するドメインを選択し、「設定」ボタンをクリック

「Webフォント設定」画面に先ほど設定したドメインが表示されていれば設定完了です。

ドメインの設定について

Webフォントを設定できるドメインは初期ドメイン、独自ドメインの中から3つまでです。

また、画面上の「削除する」ボタンをクリックすると、Webフォント設定が解除され、順次ブラウザ標準のフォント表示に戻ります。

以下のコードをWebフォントで表示したいページのHEADタグ(<head>〜</head>)内に記述してください。
なお、下記のコードは</head>タグの直前に記述することが推奨されています。

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

Webフォントを適用したいタグにご希望の書体(font-family)を設定してください。
各フォントのfont-familyについては「各WebフォントのCSS指定用コード」をご参照ください。

HTML
<h1>Webフォント活用サイト</h1>
CSS
h1{ font-family: "新ゴ R"; }

編集したCSSファイルと手順3で編集したHTMLファイルをサーバーにアップロードし、ブラウザ上で「更新」をクリックするとWebフォントが反映されます。

また、上記で指定したWebフォントの適用が外れる、または何らかの理由で適用できない際、続けて代替として表示される標準フォントを指定することが可能です。必要に応じて下記の例のように,(半角コンマ)区切りで代替フォントを指定してください。

CSS
h1{ font-family: "新ゴ R" , "メイリオ" , Meiryo , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "MS Pゴシック" , sans-serif; }

Webフォントを太字にする方法について

Webフォントはフォント本来の太さで表示する関係上、Bタグやfont-weightなどの太字設定は無効となります。
太字を適用したい場合は太字にしたい範囲を別のタグで囲み、現在のフォントよりも太いWebフォントを適用してください。

HTML
<p>Webフォントは<b>美しい!</b></p>
CSS
p{ font-family: "新ゴ R"; }
b{ font-family: "新ゴ B"; }

Webフォントの適用を解除するには、以下の作業を順に行ってください。

  1. HTMLファイルとCSSファイルよりWebフォントの適用時に追加した記述を削除します。
    その際、HTMLファイルより下記のJavaScriptファイルの記述も必ず削除してください。
    <script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>
  2. サーバーパネル」⇒「Webフォント設定」よりドメインの登録を解除してください。

以上の作業を行った後、Webフォントの適用が外れているかご確認ください。

このマニュアルは役に立ちましたか?