ADDING WEBFONTS

@font-face {
	font-family: 'YourFont';
	src: url('yourfont.eot');
	src: url('yourfont.eot?#iefix') format('embedded-opentype'), url('yourfont.woff') format('woff'), url('yourfont.ttf') format('truetype'), url('yourfont.otf') format('opentype'), url('yourfont.svg#YourFont') format('svg');
}

@font-face {

font-family: 'YourFont';

src: url('yourfont.eot');

src: url('yourfont.eot?#iefix') format('embedded-opentype'), url('yourfont.woff') format('woff'), url('yourfont.ttf') format('truetype'), url('yourfont.otf') format('opentype'), url('yourfont.svg#YourFont') format('svg');

}

These are added within a <style> section in the header. This works all nicely in most modern email clients, but Outlook does not load webfonts and falls back to Times New Roman, which might not always be desired.

OVERRIDE FOR MODERN CLIENTS

[style*="YourFont"] {
	font-family: 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif !important
}

[style*="YourFont"] {

font-family: 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif !important

}

Add this to the header <style> section as well. This makes sure that in clients, that allow Webfonts, your font is actually being used.

ARIAL FOR OUTLOOK

<table>
<tr>
<td style="background:white;height:30px;font-family:  Arial, 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;">
Some text!
</td>
</tr>
</table>

<table>

<tr>

Some text!

</td>

</tr>

</table>

In the body of the email template, you assign your font-family styles for the text, but making sure that Arial is listed first.

Outlook will than use Arial for the text styling.

In modern clients this will be overwritten with the “style rule” above, which checks for YourFont and updates the font-family styling accordingly.

Adding a Webfont Fallback for Email Templates in Outlook

ADDING WEBFONTS

OVERRIDE FOR MODERN CLIENTS

ARIAL FOR OUTLOOK

Enjoy coding …

Alexander