Tutorials

[EN] Custom Fonts

Suggest Edits

Use your own font in your newsletter

There are basically two types of web fonts: Google Web font and a custom web font. In our white paper, we discuss the special features of these options and explain how to use them in your newsletter.

Google web font

According to a ruling by the Munich Regional Court on 20 January 2022, the use of Google Fonts via the Fonts API is not compliant with data protection regulations. Referencing Google Fonts via a link is therefore not lawful; the font files must be integrated directly. Further information on this topic can be found here.

Due to the current regulations, please proceed as follows when integrating Google Fonts:

Select the desired font on the website fonts.google.com and click on the ‘Download family’ button. Unzip the ZIP file. The entire Google Font family is always downloaded. Select the fonts you want to use in your template and save them in the desired folder.

Custom web fonts

All fonts that are not available at www.google.com/webfonts are referred to as custom web fonts.

Integrating Google Fonts and web fonts into your template

Note

These fonts are only displayed correctly on the iPhone, in the web version and in the eworx Marketing Suite. Alternative fonts must be stored for all other clients.

The first step is to convert the font into a web font. This can be converted using an online generator.

Next, a CSS file must be created that links to the generated fonts.

If multiple font styles (bold, regular, thin, etc.) are available, the following must be observed:

  • font-family must have the same name for each font-face (in our case, NeoSans)all NeoSans)
  • font-weight must be set correctly for each font-face (example: bold=700; thin=200)

You must then upload the fonts to the eworx Marketing Suite and adjust the template GUID in the path.

@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');
}

Then you can upload the CSS file.

Now the CSS file needs to be integrated into the template:

<head>
	<link href='font.css' rel='stylesheet' type='text/css'>
</head>

Now the font family needs to be set.

Example

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>

Updated 2 days ago