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. Diese helfen Dir, dass Erscheinungsbild Deiner E-Mails und deiner Website zu vereinheitlichen.
Die E-Mail-Templates Komfort und Premium erlauben 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. Webfont im Mailing oder Branding-Content einsetzen

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“.

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

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.


Beispiele:
  1. .font:  legt den Font-Stack für die gesamte Mail fest.
  2. .h1, .h2, .h3 legen den Font-Stack für die jeweiligen Headlines fest.
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.