メインコンテンツにスキップ

Web フォントのホスティングとレポーティング

Supriya Bisht avatar
対応者：Supriya Bisht
今日アップデートされました

これまで Wb プロジェクトやデジタル広告にフォントを追加し、サブセット化オプションを使ってパフォーマンスを微調整しました。これで実際に使用するための準備が整いました。ここでは、フォントを簡単かつスピーディにホスティングし、使用状況を監視する方法を説明します。

Monotypeの CDN サービスを利用した Web フォントのホスティング

Monotype のホスティング Web フォントサービスは、CDN からフォントの提供を行います。そのため、サイト訪問者の所在地に関係なく、高速でフォントをデリバリします。Monotype のサービスを利用して Web フォントをホスティングする方法は以下の通りです。

  1. 最初に、Web プロジェクト（今回の場合はサンプルの Web プロジェクト「Web Project 01」）をクリックして、右のメインビューで開きます。

  2. 次に、フォントリスト上部の［Embed Code（埋め込みコード）］ボタンをクリックします。

    A blue rectangle with white text Description automatically generated

  3. [Web project embed codes（Web プロジェクトの埋め込みコード）]ダイアログで、CSS を利用して Web アプリケーションにフォントを含めることを選択できます。

    CSS Code Extraction

  4. ［Copy（コピー）］ボタンをクリックして、CSS コードスニペットをコピーします。

  5. このコードスニペットを Web ページの <head> セクションに貼り付けます。このスクリプトは、実行時に CDN から Web プロジェクトをダウンロードし、使用状況をトラッキングするために使用されます。

  6. 次に、[Web project embed codes（Web プロジェクトの埋め込みコード）]ダイアログの[Font style CSS（フォントスタイル CSS）]セクションで、ドロップダウンメニューからフォントスタイルを選択して、Web サイトの CSS で使用する フォントファミリー、フォントスタイル、フォントストレッチのスタイルコードを生成します。［Copy（コピー）］ボタンをクリックしてこれらをコピーします。

    Embed Font style CSS

  7. CSS に含めたいすべてのスタイルについて、上述の手順を繰り返してください。

    ご注意ください：新世代の Web フォントおよびデジタル広告ホスティングサービスが導入されています。これにより、旧テクノロジは廃止され、古い Web プロジェクトやデジタル広告でできる操作は限られています。この移行についての詳細は、こちらのリンクをご覧ください。

セルフホスティング Web フォント

Web プロジェクト用のセルフホスティングキットをダウンロードして、お使いのサーバーからフォントを取得することもできます。手順は以下のとおりです。

  1. Web プロジェクトのフォントリストの上部にある［Download Kit（キットをダウンロード）］ボタンをクリックします。

    A blue rectangle with text Description automatically generated

  2. ダウンロードした .zip ファイルを解凍します。

  3. 「Fonts」フォルダー内のフォントをお使いのサーバーにアップロードします。このフォルダーには、Web プロジェクト内の各スタイルの WOFF（.woff）バージョンと WOFF2（.woff2）バージョンが含まれています。

  4. ダウンロードしたセルフホスティングキットには、次のファイルも含まれています。

サンプル Web フォント実装

ファイル：startHere.html、「startherefiles」フォルダー

「startHere.html」ファイルを開くと、サンプル CSS を含む Web フォントの実装ガイドラインが表示されます。Web フォントの使用中に問題が起きた場合の基本的なトラブルシューティング手順もいくつか記載されています。

また、ウォーターフォールモデルを用いて、さまざまなポイントサイズでの Web フォントのレンダリング結果を表示するハイライトセクションもあります。

WebProject CSS

ファイル： <Unique WebProject Id>.css

これは、Web サイトで Web フォントと共に使用することが推奨された CSS です。レンダリングのために Web フォントをダウンロードする際のパフォーマンスを最適化するよう設定されています。

また、上部には Monotype Fonts で作成された Web プロジェクトに関連付けられたトラッキング CSS「1.css」 へのリンクがあります。

この CSS は Web フォントの使用状況をトラッキングし、使用状況データを、レポーティングとライセンス管理のために Monotype Fonts に戻します。

フォント使用状況の監視とレポーティング

Web フォントの使用状況のレポーティング機能では、Web プロジェクトのページビュー数とデジタル広告のインプレッション数がレポートされます。企業の管理者は、以下に示す通り、メインビューの Web プロジェクト/デジタル広告の名前の下にある［Reports（レポート）］ボタンをクリックすることで、フォントの使用状況を簡単に監視することができます。

A close-up of a website Description automatically generated

フォントの使用状況の監視とレポーティングについての詳細は、こちらをクリックしてご覧ください。

重要なお知らせ：

  • ページビュー数/インプレッション数は、Web プロジェクト全体またはデジタル広告全体のページビュー数に基づいて算出されます。例えば、Web プロジェクトに 10 種類のフォントが含まれており、ページビューが 1 回の Web ページで使用されている場合、レポートには 10 ​​ページビューではなく 1 ページビューと表示されます。

  • 超過が発生した場合に、Monotype がホスティングサービスを停止したり、超過分について請求したりすることはございません。ただし使用量が許容量を大幅に超過した場合、ご連絡させていただく場合がございます。

こちらの回答で解決しましたか？