Use custom fonts in a Studio creative

You can include custom fonts in HTML5 creatives by uploading a custom font file to Studio and using the CSS font-face rule. 

Supported font file types

• EOT
• OTF
• TTF
• WOFF
• WOFF2

Load custom fonts with CSS

In your creative's CSS file, add the @font-face rule before any other styles. For simplicity, this example uses only a truetype font file. To maximize browser compatibility, you should also include WOFF or EOT font file sources. Learn more about font-face browser support from CSS-Tricks.

CSS

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular.ttf') format('truetype');
}

Then, use the font family property to style elements like the example below. This example sets Open Sans as the font to use for a text div with the ID "text-element".

CSS

#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}

Upload your custom font file to Studio

You can upload your custom font file with your other creative files, or you can upload it to the Asset Library if you plan to use the same font in many creatives.

Upload a font with your creative files

If you're using a custom font in a single creative, you can upload the font file along with your HTML, JavaScript, and image files. 

Upload a font to Asset Library

If you're using a custom font in many creatives, save time by uploading the font into the Asset Library.

Font file sizes can be big. Use polite loading to wait for the page to load before you load the font file. Also, to avoid an unsightly flash of unstyled text, hide the text until the font file is loaded.

Using custom fonts in dynamic creatives

The method described above can also be used if you're using the same custom font in all the variations of a dynamic creative.

If you want to use different custom fonts for each variation of a single dynamic creative, upload the fonts into Asset Library, then get the Asset Library paths and put them in your feed. Then you can write JavaScript to update the CSS font-face rule for the text element using the paths from the feed. The example below uses two columns in the feed to load and set a custom font—one column "fontname" for the font-family name to use, and one column "font" for the font file to load.

JavaScript sample code

var sheets = document.styleSheets; // Returns an Array-like StyleSheetList
var sheet = document.styleSheets[0]; // Get the first style sheet
sheet.insertRule("@font-face {
  font-family: 'dynamicContent.SampleElement[0].fontname';
  src: url('dynamicContent.SampleElement[0].font') format('truetype');
}", 0);

// Change "text-element" to the ID of the text div you want to use the font in.
sheet.insertRule("#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}", 1);