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 dabei, das Erscheinungsbild deiner E-Mails und deiner Website zu vereinheitlichen.
Die E-Mail-Templates Komfort und Premium ermöglichen es, individuelle Webfonts einzubinden.

Info
Webfonts werden nicht von allen E-Mail-Clients unterstützt
  1. Webfonts werden auf dem iPhone und auf dem Mac mit Apple Mail unterstützt. 
  2. Outlook 365 unterstützt keine Webfonts.
  3. In der Browseransicht profitieren alle Empfänger von den Webfonts.
Einen detaillierten Leitfaden zur Unterstützung von Webfonts findet sich in diesem englischsprachigen Litmus-Artikel.

Webfonts einbinden

1. Font auswählen

Drittanbieter-Webfonts
Einen Webfont-Anbieter wie beispielsweise Google Fonts oder Adobe Fonts auswählen. Den gewünschten Font heraussuchen und den Code zum Einbetten anzeigen lassen.
Die @import-Anweisung kopieren:



Self-Hosting-Webfonts
Alternativ lassen sich Webfonts von beliebigen Server einbinden. Voraussetzung ist, dass auf dem Server der CORS-Header (Access-Control-Allow-Origin) für deine Redirect-Domain gesetzt ist.

Beispiel für Apache (.htaccess):
  1. <FilesMatch "\.(ttf|otf|eot|woff|woff2|svg)$">
  2.   <IfModule mod_headers.c>
  3.     Header set Access-Control-Allow-Origin "<URL REDIRECT-DOMAIN>"
  4.   </IfModule>
  5. </FilesMatch>

Achtung: Die Schriftarten müssen im WOFF/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 unter 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 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. Gib immer zusätzlich mindest eine Websafe-Schriftart als Fallback an.


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.

🎓

Vertiefe jetzt dein Wissen zu der Erstellung von Newslettern.

Lerne mit praxisnahen Lektionen, Video-Tutorials und Best Pratices in der MAILINGWORK Academy

Jetzt ausprobieren →