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.
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);