サービスの使いかた

Webフォントをページに反映する

スマートライセンス・プランは、次の3つの作業で簡単にWebフォントをご利用頂けます。

STEP1|WebサイトのURLを登録する

  1. 会員マイページへログインします。

    当サイトメニューからログインページへ移動してフォームからログインしてください。

  2. 「スマート>スマートサイト登録・PV数レポート」を開き、「新規登録する」ボタンを押します。

    会員マイページ内メニューから「スマート>スマートサイト登録・PV数レポート」を開きます。

    「サイト登録・PV数レポート」ページにて新規登録するボタンを押します。

  3. 「サイト登録」ページで利用したいサイトのURLを入力し、「登録する」ボタンを押します。

    フォームにサイトURLを入力して送信してください。

  4. 確認画面へ切り替わるので、URLに間違いがなければ「登録する」ボタンを押します。

  5. 「サイト登録が完了しました。」というメッセージが表示されればURLの登録は完了です。STEP 2へ進みます。

STEP2|スクリプトタグをHTMLに貼る

会員ページからフォントを選択し、コードスニペット(タグ)をHTMLに貼る方法です。「ためし書き」からHTMLに反映する方法は、「ためし書き」の画面の見かた よりご確認ください。

  1. 「フォント一覧」ページを開き、フォントの選択を行い、JavaScriptスニペットをコピーします。

    会員マイページ内メニューからフォント一覧を選択します。

    「フォント検索」フォームを使って利用したいフォントを検索します。検索結果から利用するフォントの「マイフォントに追加」ボタンを押します。

    「マイフォントに追加」ボタンを押すと、マイフォントにフォントを追加するためのモーダルダイアログが開きます。新規フォルダを作成した上で、「マイフォントに追加」ボタンを押してください。

    スクリプトを取得するために、「マイフォント」ページへ移動してください。

    フォルダを選択すると登録したフォントが表示されます。

    フォルダを選択した上で「スクリプトの発行」をクリックすることで必要なソースを取得できます。

    スマートライセンス・プランでは、「詳細設定パネル」でWebフォントの表示スタイル、タイムアウト時間、文字間の余白削除や表示位置調整機能が設定できます。詳しくはダウンロード状況に応じてフォント表示の仕方を変える 、または文字間のアキを調整する よりご確認ください。

    会員マイページの「スクリプト発行」ページの「詳細設定パネル」

  2. Webフォントを利用したいページのHTMLファイル </head>タグの直前に、コピーしたJavaScriptスニペットを貼り付けます。

    ソースコード:<meta charset="utf-8" />
<title>FONTPLUS | Webフォント</title>
<link rel="stylesheet" href="sample.css" type="text/css">

<script type="text/javascript" src="//mit.fontplus.jp/accessor/script/fontplus.js(こちらにマイフォントの情報が入ります)?&aa=1&ab=2" charset="utf-8"></script>

</head>

STEP3|CSSでフォントを指定する

  1. 会員ログイン後、「フォント一覧」ページより使いたいフォントを選び、CSSでfont-familyを指定します。
    例)ロダン Pro B

    「フォント検索」フォームを使って利用したいフォントを検索します。

    検索結果に表示されたフォントからfont-familyプロパティに指定する値を取得できます。

  2. 上の図のように日本語表記と英語表記の2種類のフォント名を掲載していますが、指定する際はいずれか1つのフォント名をご利用ください。

    /* ○ */
    font-family: "FOT-マティス Pro B";
    font-family: "MatissePro-B";
    
    /* × */
    font-family: "FOT-マティス Pro B または MatissePro-B";
    font-family: "FOT-マティス Pro B", "MatissePro-B";
    
  3. Webフォントを使いたい箇所(セレクタ)にCSSでフォントを指定します。
    例)h1タグにマティス Pro Bを指定

    h1  { font-family: "FOT-マティス Pro B"; }
    

以上で、スマートライセンス・プランの設定は完了です。設定したHTMLやCSSをWebサーバーにアップロードしてWebフォントが表示されていることをご確認ください。