スタイルリンクとは、フォントスタイルごとに異なるフォントファミリー名を使用するかわりに、同一のフォントファミリー名にリンクされた複数のスタイルに対する font-face 宣言を使用することです。
本セクションでは、以下の点について説明します。
Web プロジェクトとデジタル広告とは?
Web プロジェクト
Web プロジェクトは、ライブラリを整理するためのツールで、フォントの Web フォントフォーマットへアクセスしたり、それらを 1 つの場所でグループ化したりすることができます。
Web プロジェクトの詳細については、こちらをクリックしてください。
デジタル広告
Web プロジェクトと同様、Monotype Fonts のデジタル広告は、フォントライブラリの整理や、HTML5 広告で使用する Web フォントの準備のためのグルーピングオプションです。
デジタル広告の詳細については、こちらをクリックしてください。
CSS で Web フォントを定義するさまざまな方法
CSS で Web フォントを定義する方法は 2 つあります。
ファミリーにリンクされた Web フォント定義。font-face プロパティ内の記述子を使用し、特定のフォントファミリーの内の、使用するフォントスタイルの詳細を指定します。これは現在の業界標準です。
個々の Web フォントの定義。ファミリー内の個々の Web フォントごとに個別の font-face 定義を行います。
既存のデジタルアセットにスタイルリンクを設定する方法
https://enterprise.monotype.com/ にアクセスします。
Monotype Fonts Web プラットフォームにログインします。
[My Library(マイライブラリ)]をクリックし、左のパネルからデジタルアセットを選択します。
選択されたアセットについて Monotype Fonts でスタイルリンクが利用可能になったことを示すバナーが表示されます。これは、アセットが従来方式のスタイルリンクを使用しているためです。
縦の三点リーダーアイコン(
)をクリックし、ドロップダウンメニューから[Duplicate(複製)]を選択します。アセットが複製されます。
注記:デジタルアセットを複製するには、編集権限または共同オーナー権限が必要です。
この操作を行うことによって、リンクされたスタイルの埋め込みコードが新しいフォーマットでコピーされ、「This web project/digital ad follows style linking.(この Web プロジェクト/デジタル広告はスタイルリンクに準拠しています)」という新しいバナーが表示されます。
[</> Embed Code(埋め込みコード)]をクリックして、その Web プロジェクトのフォントスタイルを表示し、すべての CSS 要素をコピーします。
注記:当社は、軽量な JavaScript と CSS の実装に切り替えることで、Web フォントのページビューのトラッキング機能の向上を実現しました。ページ読み込み時間の短縮、よりスムーズな体験実現のために、従来の CSS よりもこちらを使用することをお勧めします。
新しいスタイルリンクの埋め込みコードと以前のものとの違い
以前は、ページビュートラッキングは同期的に実装されていました。現在は、Web サイトの速度を損なうことなく Web フォントのページビューのトラッキングを行える、より効率的かつ軽量な JavaScript と CSS のソリューションへと移行しています。この変更により、読み込み時間の短縮とスムーズな体験が実現されています。
引き続き以前の実装をご利用いただくこともできますが、パフォーマンスの向上をお求めの場合は、非同期の JavaScript + CSS アプローチをご選択ください。
旧スタイルリンク
新スタイルリンク
既存のユーザーが、新しい非同期 JavaScript + CSS アプローチを活用する方法
最新の実装は新しく作成された Web アセット専用であるため、既存のユーザーは古い CSS 埋め込みコードにのみアクセスできます。ただし、フォントの追加や削除、サブセット化、または複製など、Web プロジェクトの更新を行うことで、新しいアプローチをご利用いただけます。