Verknüpfen eines externen Schrift-Stylesheets mit einem Markensystem

This article applies to Content Automation templates which are different from Brandfolder Custom Templates, and CI Hub. 

Möglicherweise hat Ihre Marke Ihre Schriftarten bereits digital zugänglich und webfähig über ein CDN (Content Delivery Network). In diesem Fall können Sie einfach das CSS-Stylesheet, das Ihre gehostete(n) Schriftart(en) deklariert und darauf zugreift, in Brand System verlinken, das in Ihren Vorlagen verwendet werden kann.

Verknüpfen Ihres ersten Stylesheets

1. Klicken Sie auf der Registerkarte "Typografie" im Markensystem in der oberen rechten Ecke der Seite auf Bearbeiten.
2. Wir können entweder eine deklarierte Schriftart in einer bestehenden Schriftart aktualisieren oder mit einer neuen Schriftart und Schriftartenliste von vorne beginnen.
3. Klicken Sie auf Quelle hinzufügen für eine nicht verknüpfte Schriftarteingabe, um das Stylesheet-Link-Modal zu öffnen.
4. Basierend auf den in Ihrem Stylesheet deklarierten @font-facefont-family, können Sie in der Name-Eingabe angeben, welche Schriftart Sie verknüpfen möchten. Wenn mehrere vorhanden sind, lesen Sie den Abschnitt mehrere Schriftarten weiter unten.
5. Klicken Sie auf Quelle hinzufügen, um den Verknüpfungsvorgang abzuschließen.

Ihre neue Schriftart ist nun mit Ihrem CDN verknüpft, sodass sie jedes Mal, wenn Sie eine Vorlage erstellen, verfügbar ist. 

Stylesheet-Formatierung

Wenn Sie ein externes Stylesheet verlinken, erwartet Brand System eine öffentlich zugängliche CSS-Datei, die eine oder mehrere @font-Face-Deklarationenfür Ihre Schriften enthält. 

Ihre Datei sollte in etwa wie folgt aussehen. Bitte denken Sie daran, dass das Stylesheet, das Sie mit Brand System verknüpfen, weiterhin auf die Schriftarten zugreifen muss, die Sie in densrc-URLs deklarieren.

@font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica.woff2') format('woff2'), url('helvetica.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; Schriftart: kursiv; }

Mehrere Schriftarten in Ihrem Stylesheet

Wenn Ihr Stylesheet wie im folgenden Beispiel aussieht (d. h. mehrere@font-facefont-family-Deklarationen), müssen Sie mehrere Schriftarten mit demselben CDN-Link einrichten. Auf diese Weise können Sie auf der Grundlage Ihrer neu verknüpften Schriftarten korrekt Schriftskalen erstellen. Wie das in Aktion aussieht, sehen Sie sich im folgenden Video an. 

@font-face { font-family: 'Poppins'; src: url('poppins.woff2') format('woff2'), url('poppins.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Weitere Ressourcen

• MDN-Webdokumente: @font
• Digital Ocean: So definieren Sie benutzerdefinierte Schriftarten in CSS mit @font-Face und Font-Display