HTML5 クリエイティブでカスタム フォントを使用するには、Studio でカスタム フォント ファイルをアップロードし、CSS の font-face ルールを使用します。
サポートされているフォント ファイルの形式
- EOT
- OTF
- TTF
- WOFF
- WOFF2
CSS でカスタム フォントを読み込む
クリエイティブ の CSS ファイルで、他のスタイルより前に @font-face ルールを追加します。わかりやすいように、この例では truetype のフォント ファイルのみを使用します。ブラウザの互換性を最大限に高めるには、WOFF や EOT のフォント ファイル ソースも含めてください。「CSS-Tricks」の font-face のブラウザ サポートに関する記事をご覧ください。
CSS
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Regular.ttf') format('truetype');
}次に、以下の例のように、font-family プロパティを使用して要素のスタイルを指定します。この例では、「text-element」という ID を持つテキスト div で使用するフォントとして「Open Sans」を設定しています。
CSS
#text-element {
font-family: 'Open Sans', Arial, sans-serif;
}カスタム フォント ファイルを Studio にアップロードする
カスタム フォント ファイルは、他のクリエイティブ ファイルとともにアップロードできます。多数のクリエイティブで同じフォントを使用する予定がある場合は、アセット ライブラリにアップロードすることもできます。
クリエイティブ ファイルでフォントをアップロードする
カスタム フォントを 1 つのクリエイティブで使用する場合は、HTML ファイル、JavaScript ファイル、画像ファイルとともに、フォント ファイルをアップロードできます。
アセット ライブラリにフォントをアップロードする
カスタム フォントを多数のクリエイティブで使用する場合は、フォントをアセット ライブラリにアップロードすると時間を節約できます。
ダイナミック クリエイティブでカスタム フォントを使用する
上記の方法は、ダイナミック クリエイティブのすべてのバリエーションで同じカスタム フォントを使う場合にも使用できます。
1 つのダイナミック クリエイティブのバリエーションごとに異なるカスタム フォントを使いたい場合は、フォントをアセット ライブラリにアップロードしてから、アセット ライブラリのパスを取得し、そのパスをフィードに配置します。さらに、フィードからのパスを使ってテキスト要素の CSS font-face ルールを更新するように、JavaScript を記述します。下記の例では、フィード内の 2 つの列を使って、カスタム フォントを読み込み、設定しています。1 つは、使用する font-family の名前に対応する「fontname」列、もう 1 つは、読み込むフォント ファイルに対応する「font」列です。
JavaScript サンプルコード
var sheets = document.styleSheets; // 配列形式の StyleSheetList を返す
var sheet = document.styleSheets[0]; // 最初のスタイルシートを取得する
sheet.insertRule("@font-face {
font-family: 'dynamicContent.SampleElement[0].fontname';
src: url('dynamicContent.SampleElement[0].font') format('truetype');
}", 0);
// 「text-element」を、フォントを使用したいテキスト div の ID に変更する
sheet.insertRule("#text-element {
font-family: 'Open Sans', Arial, sans-serif;
}", 1);