Nelle creatività HTML5 puoi includere caratteri personalizzati caricando un file del carattere personalizzato in Studio e adottando la regola @font-face di CSS.
Tipi di file del carattere supportati
- EOT
- OTF
- TTF
- WOFF
- WOFF2
Caricare caratteri personalizzati con CSS
Nel file CSS della creatività, aggiungi la regola @font-face prima di qualsiasi altro stile. Per semplificare la procedura, l'esempio citato utilizza solo un file del carattere truetype. Per ottimizzare la compatibilità con il browser, ti conviene includere l'origine del file del carattere, WOFF o EOT. Scopri di più sulle modalità di supporto del browser della regola @font-face in CSS-Tricks.
CSS
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Regular.ttf') format('truetype');
}Quindi, utilizza la proprietà della famiglia di caratteri per stilizzare gli elementi come nell'esempio sottostante. Questo esempio imposta Open Sans come carattere da utilizzare per il testo di un tag div con ID "text-element".
CSS
#text-element {
font-family: 'Open Sans', Arial, sans-serif;
}Caricare il file del carattere personalizzato in Studio
Puoi caricare il file del carattere personalizzato insieme agli altri file della creatività oppure puoi caricarlo nella Raccolta di asset, se prevedi di utilizzare lo stesso carattere per più creatività.
Caricare un carattere con i file della creatività
Se utilizzi un carattere personalizzato in un'unica creatività, puoi caricare il file del carattere insieme ai file HTML, JavaScript e immagine.
Caricare un carattere nella Raccolta di asset
Se utilizzi un carattere personalizzato per più creatività, risparmia tempo caricando il carattere nella Raccolta di asset.
Utilizzo di caratteri personalizzati nelle creatività dinamiche
Il metodo descritto sopra può essere adottato, anche se utilizzi lo stesso carattere personalizzato in tutte le varianti di una creatività dinamica.
Se desideri utilizzare caratteri personalizzati diversi per ogni variante di una singola creatività dinamica, carica i caratteri nella Raccolta di asset, quindi rileva i percorsi della Raccolta di asset e inseriscili nel tuo feed. A questo punto puoi scrivere il codice JavaScript in modo da aggiornare la regola @font-face di CSS relativa all'elemento di testo con i percorsi del feed. L'esempio sottostante utilizza due colonne nel feed per caricare e impostare un carattere personalizzato: una colonna denominata "fontname" per il nome della famiglia di caratteri da utilizzare e una colonna denominata "font" per il file del carattere da caricare.
Codice JavaScript di esempio
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);