Wie kann ich in meinen E-Mails Webfonts verwenden?

Wie kann ich in meinen E-Mails Webfonts verwenden?

Übersicht

Webfonts sind Schriftarten, die direkt aus dem Internet geladen werden. Sie helfen dir dabei, das Erscheinungsbild deiner E-Mails und deiner Website zu vereinheitlichen.
Die E-Mail-Templates Komfort und Premium ermöglichen es dir, individuelle Webfonts einzubinden.

Info
Webfonts werden nicht von allen E-Mail-Clients unterstützt
Einen detaillierten Leitfaden zur Unterstützung von Webfonts findest du in diesem englischsprachigen Litmus-Artikel.

So bindest du Webfonts ein

1. Font auswählen

Wähle einen Webfont-Anbieter wie Google Fonts oder Adobe Fonts. Suche dort die gewünschte Schriftart/Schriftschnitte heraus und lasse dir den Code zum Einbetten anzeigen. Verwende die @import-Anweisung:

Kopiere den markierten Code-Abschnitt in die Zwischenablage.

Alternativ kannst du Webfonts direkt von deinem Server einbinden. Dazu muss dort der CORS-Header für deine Redirect-Domain aktiviert sein. Die Schriftarten müssen im Woff2-Format bereitgestellt werden.

2. Den Webfont zum Mailing oder Branding-Content hinzufügen

Im nächsten Schritt fügst du den ausgewählten Code in das Branding ein - entweder im Branding-Setup des Mailings oder im Branding-Content (Menü: Module / Contents). Öffne das Branding und gehe zum Abschnitt „Schriftarten und Schriftgrößen“.

1. Input „CSS - hier Webfonts einbinden“
Füge hier den kopierten Quellode (mit der @import-Syntax) ein:

2.
Input „CSS": Hier kannst du die Schriftarten und Schriftschnitte für spezifische Elemente in deinem Mailing angeben. Füge den Namen der Schriftart in einfachen Hochkommas dem Attribut "font-family" hinzu.


Die Schriftarten (font-family) können beispielsweise auf die folgenden CSS-Klassen angewendet werden:
  1. .font:  Global, also alle Texte in der E-Mail
  2. .h1, .h2, .h3: Die jeweilige Headline
  3. .text-small, .text-medium, .text-large: Normaler Fließtext
Info
Wenn du die Anpassung im Branding-Content vorgenommen hast, musst du das Branding in Deinen Mailings erneut einlesen, damit diese sichtbar wird.

Support

Kontaktiere uns, falls du Fragen zu diesem Thema hast.