Webフォントの基本的な使い方

本システムで公開されているフォントを、サブセットされた軽量で高速なWebフォントとして利用することができます。

Webフォントの利用は3ステップで開始できます。

  1. Webサイトを登録する
  2. 利用するフォントを選ぶ
  3. スクリプトタグの埋め込みとfont-familyの指定

ワンポイントテクニック: 複数人で1つのウェブサイトを管理する

複数人で1つのウェブサイトを管理したい場合(例えば、デザイナー様とディレクター様、あるいは制作会社様と運営会社様とご担当者様など)に便利な「ユニット機能」があります。

ユニット機能で「ユニット」と呼ばれるユーザーグループを作ることで、複数人でWebサイトの管理や利用量の確認などを行うことができます。

ユニット名は会社名でも、プロジェクト名でも、お好きな名前で作ることができます。

詳しくはユニットの作成方法・ユニットの切り替え方法をご参照ください。

1. Webサイトプロジェクトを登録する

メインメニューから「Webフォント」をクリックします。

Webフォント

「プロジェクトを追加する」をクリックします。

Webサイトの名前、プロトコル(httpで利用するか、httpsでりようするか)、URL、利用プラン、備考、を入力し、同意事項に同意いただくチェックを入れます。

上図は有料プランの入力例です。有料プランの利用は、お支払い情報の入力(振り込みの場合は郵送による所在の確認)が必要です。

上図は無料プランの入力例です。無料プランは、無料プラン対応フォントのみご利用いただけます。また、無料プラン利用中は、Webフォントを使用するウェブサイトにバナーが表示されます。

WebサイトのURLについてのご注意

  • WebサイトのURLは、/で終わる形としてください。指定されたURL配下のURLでWebフォントがご利用いただけます。Webフォントをご利用になるページごとに入力する必要はございません。
  • httpとhttpsは同一サイトとして扱う事ができます(2016/11/11アップデートによる)。

 

入力が完了したら、「Webフォントプロジェクトを登録」を押します。

追加が完了すると、下図のように追加されます。

2. 利用するフォントを選ぶ

メインメニューから「フォントセレクター」をクリックします。

フォントセレクター

利用するフォントをフォントセレクターから探します。

「フォントの利用を開始する」をクリックします。

タイプテスターの場合

テーブルレイアウトの場合

カードレアウトの場合

なお、無料プランのWebサイトでは、値段の欄に無料プラン対応と記載のあるフォントのみ利用いただけます。

3. スクリプトタグの埋め込みとfont-familyの指定

ウェブフォントに戻り、利用するウェブサイトの詳細を確認します。プロジェクト名をクリックすることで、詳細を確認できます。

上図は有料プランの例です。

 

スクリプトタグを発行ボタン押し、スクリプトタグを表示します。

スクリプトタグを選択してコピーし、Webフォントを利用するWebサイトのHTMLに貼り付けます(head部またはbody部)。

 

スクリプトタグのHTMLへの埋め込み

利用可能フォントから、フォント名をクリックすると、CSSに記述いただくfont-family値が表示されます。
CSSのフォントを適用したいセレクターに、font-family値を挿入します。

または、フォントセレクターの利用中となっているフォントから、font-family値を取得してCSSのセレクターに適用します。

タイプテスターの場合

テーブルレイアウトの場合

カードレアウトの場合(クリックするとコピーされます)

コピーしたフォント名を、CSS内のフォントを適用したいセレクタに、font-familyプロパティの値として設定します。

※@font-faceによる指定は不要です。

CSSに設定

以上で、Webフォントの設定は完了です。実際に利用できているか、確認しましょう。

もしWebフォントが適用されない場合は、下記を確認してください。

  • 登録されたWebサイトのURL上で確認していますか?
  • 登録されたWebサイトのスクリプトタグを使っていますか?
  • フォントセレクターで選んだフォント名をCSSに書いていますか?
  • ウェブフォントプロジェクト詳細の利用可能フォント一覧に利用するフォント名がありますか?
  • 選ばれたフォントに適用したい文字は含まれていますか?
    • フォントセレクターのタイプテスターで事前にご確認いただけます。

Webフォントの料金の説明・シミュレーションについてはこちらをご覧ください。

Ajaxによる動的なWebページへのフォントの適用や、input、textareaで入力された文字列にフォントを適用するなどの利用を行う場合は、スクリプトタグ解説をご覧ください。