Webフォント設定について(HTML記述形式) | wpXクラウド

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

Webフォントの適用が解除されない場合は下記をご参照ください。

管理パネルにログインし、「WordPress設定」をクリックします。

WordPress設定画面の「ホームページ設定」内から、「Webフォント設定」の「設定」ボタンをクリックします。

現在の設定をご確認の上、設定変更ボタン(ONにする/OFFにする)をクリックしてください。

以下のコードを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" , "ＭＳ Ｐゴシック" , sans-serif; }

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

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

▼HTML

<p>Webフォントは<b>美しい！</b></p>

▼CSS

p{ font-family: "新ゴ R"; }
b{ font-family: "新ゴ B"; }

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

HTMLファイルとCSSファイルよりWebフォントの適用時に追加した記述を削除します。
その際、HTMLファイルより下記のJavaScriptファイルの記述も必ず削除してください。
```
<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>
```
「管理パネル」⇒「WordPress設定」⇒「Webフォント設定」より設定を「OFF」に変更してください。

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

下記を参考にWebフォントの設定を行ってください。
また、日本語で指定する場合は""(ダブルクォート)で囲む必要があります。

下記は「リュウミン R-KL」を適用した場合の例です。

/* 日本語で指定する場合 */
p{ font-family: "リュウミン R-KL"; }

/* 英語で指定する場合 */
p{ font-family: Ryumin Regular KL; }

それぞれのfont-family(Webフォントを指定するスタイル)は下記の通りです。
書体の見本を確認したい場合は「書体見本一覧」をご参照下さい。

※下記表の「日本語で記述」または「英語で記述」どちらか一方をcssファイルに記述して下さい。