Automatisierung
Empfänger
Formulare
Landingpages
Statistik
Verwenden Sie Ihre eigene Schrift im Newsletter
Es gibt grundsätzlich 2 Arten von Webschriften: Google Webfont und eine individuelle Webfont. In unserem Whitepaper gehen wir auf die Besonderheiten dieser Möglichkeiten ein und erklären Ihnen die Verwendung im Newsletter.
Google Webfont
Mit Urteil des Landesgerichts München vom 20.01.2022 ist die Nutzung von Google Fonts über die Fonts API nicht datenschutzkonform. Eine Referenzierung von Google Fonts via Link ist daher nicht rechtmäßig, die Schriftdateien sind direkt einzubinden. Weitere Informationen zu diesem Thema finden sie hier.
Aufgrund der aktuellen Bestimmungen gehen Sie daher bei der Einbindung von Google Fonts wie folgt vor:
Wählen Sie auf der Website fonts.google.com die gewünschte Schrift aus und klicken Sie auf den Button „Download family“. Entpacken Sie die ZIP-Datei. Es wird immer die gesamte Font-Family der Google Font heruntergeladen. Wählen sie jene Schriften aus, die Sie auch in Ihrer Vorlage nutzen möchten und legen Sie diese im gewünschten Ordner ab.
Individuelle Webfont
Alle Schriften die unter www.google.com/webfonts nicht zu finden sind, werden als individuelle Webfonts bezeichnet.
Einbinden von Google Fonts und Webfonts in Ihre Vorlage
Hinweis
Diese Schriften werden nur am iPhone, Webversion und in mailworx richtig angezeigt. Für alle anderen Clients müssen Alternativ Schriften hinterlegt werden.
Als ersten Schritt muss die Schrift als Webfont umgewandelt werden. Diese kann durch einen Online Generator umgewandelt werden.
Als nächstes muss eine CSS Datei erstellt werden, wo auf die generierten Schriften verlinkt wird.
Sollten mehrere Schrift Styles (Bold, Regular, Thin usw.) vorliegen, ist folgendes zu beachten:
- font-family muss bei jedem font-face gleich heißen (in unserem Fall NeoSans)
- font-weight muss bei jedem font-face richtig eingestellt sein (Beispiel: bold=700; thin=200)
Die Schriften müssen Sie dann in mailworx hochladen und die Vorlagen-Guid im Pfad anpassen.
@font-face {
font-family: 'NeoSans';
font-style: normal;
font-weight:400;
src: local('NeoSans'), url('http://mlwrx.com/Media/_Templates/[Vorlagen-Guid]/NeoSans.eot?') format('eot'),
local('NeoSans'), url('http://mlwrx.com/Media/_Templates/[Vorlagen-Guid]/NeoSans.woff') format('woff'),
local('NeoSans'), url('http://mlwrx.com/Media/_Templates/[Vorlagen-Guid]/NeoSans.ttf') format('truetype'),
local('NeoSans'), url('http://mlwrx.com/Media/_Templates/[Vorlagen-Guid]/NeoSans.svg#NeoSans') format('svg');
}Dann können Sie die CSS Datei hochladen.
Jetzt muss die CSS Datei noch in das Template eingebunden werden:
<head>
<link href='font.css' rel='stylesheet' type='text/css'>
</head>Jetzt muss noch die Font-Family gesetzt werden.
Beispiel
Bold
<font style="font-family:'NeoSans', Arial, sans-serif; font-weight:700;">Test Bold</font>
Thin
<font style="font-family:'NeoSans', Arial, sans-serif; font-weight:200;">Test Thin</font>