Benutzerdefinierte Schriftarten verwenden - Studio-Hilfe [gg-richmedia-de]

Verwenden von benutzerdefinierten Schriftarten

Sie können benutzerdefinierte Schriftarten in HTML5-Creatives einfügen, indem Sie eine Datei mit benutzerdefinierten Schriftarten in Studio hochladen und dieCSS-Schriftartregel verwenden.

Unterstützte Schriftartdateitypen

• Ende
• OTF
• TTF
• WOFF
• WOFF2

Laden Sie benutzerdefinierte Schriftarten mit CSS

Fügen Sie in der CSS-Datei Ihres Creatives die @font-face-Regel vor allen anderen Stilen hinzu. Der Einfachheit halber verwendet dieses Beispiel nur eine TrueType-Schriftartdatei. Um die Browserkompatibilität zu maximieren, sollten Sie auch WOFF- oder EOT-Schriftartdateiquellen einbeziehen. Erfahren Sie mehr über die Unterstützung von Browsern für Schriftarten von CSS-Tricks .

CSS

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

Verwenden Sie dann die Eigenschaft der Schriftfamilie, um Elemente wie im folgenden Beispiel zu formatieren. In diesem Beispiel wird Open Sans als Schriftart festgelegt, die für ein Text-Div mit der ID "text-element" verwendet werden soll.

CSS

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

Laden Sie Ihre benutzerdefinierte Schriftartdatei in Studio hoch

Sie können Ihre benutzerdefinierte Schriftartdatei mit Ihren anderen Creative-Dateien hochladen oder sie in die Asset-Bibliothek hochladen, wenn Sie dieselbe Schriftart in vielen Creatives verwenden möchten.

Laden Sie eine Schriftart mit Ihren Creative-Dateien hoch

Wenn Sie eine benutzerdefinierte Schriftart in einem einzelnen Creative verwenden, können Sie die Schriftartdatei zusammen mit Ihren HTML-, JavaScript- und Bilddateien hochladen .

Laden Sie eine Schriftart in die Asset-Bibliothek hoch

Wenn Sie in vielen Creatives eine benutzerdefinierte Schriftart verwenden, sparen Sie Zeit, indem Sie die Schriftart in die Asset-Bibliothek hochladen .

Schriftdateigrößen können groß sein. Verwenden Sie Polite Loading, um zu warten, bis die Seite geladen ist, bevor Sie die Schriftartdatei laden. Um ein unansehnliches Aufblitzen von unformatiertem Text zu vermeiden, blenden Sie den Text aus, bis die Schriftartdatei geladen ist.

Verwenden von benutzerdefinierten Schriftarten in dynamischen Creatives

Die oben beschriebene Methode kann auch verwendet werden, wenn Sie dieselbe benutzerdefinierte Schriftart in allen Variationen eines dynamischen Creatives verwenden.

Wenn Sie für jede Variante eines einzelnen dynamischen Creatives unterschiedliche benutzerdefinierte Schriftarten verwenden möchten, laden Sie die Schriftarten in die Asset-Bibliothek hoch, rufen Sie dann die Pfade der Asset-Bibliothek ab und fügen Sie sie in Ihren Feed ein . Anschließend können Sie JavaScript schreiben, um die CSS-Schriftartregel für das Textelement mithilfe der Pfade aus dem Feed zu aktualisieren. Im folgenden Beispiel werden zwei Spalten im Feed verwendet, um eine benutzerdefinierte Schriftart zu laden und festzulegen – eine Spalte „fontname" für den Namen der zu verwendenden Schriftartfamilie und eine Spalte „font" für die zu ladende Schriftartdatei.

JavaScript-Beispielcode

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