16. Dezember 2021

· Whitepaper

Custom Fonts

Inhaltsverzeichnis

xx Kapitel

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

Wählen Sie auf der Webseite www.google.com/webfonts die gewünschte Schrift aus und klicken Sie dann auf den Button „Quick Use“:

Quickuse

Als nächstes müssen Sie den <link> tag im <head> tag hinzufügen.

Beispiel

<head>
	<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

Jetzt muss noch die Font-Family gesetzt werden.

Beispiel

<font style="font-family:'Roboto', Arial, sans-serif;">Test</font>

Individuelle Webfont

Alle Schriften die unter www.google.com/webfonts nicht zu finden sind, werden als individuelle Webfonts bezeichnet.

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>