I AM LISTENING TO
|

WHAT I LIKE

Browser – Developer tools & shortcuts Detecting if elements are visible in the current viewport
Design     Development    

Adding a Webfont Fallback for Email Templates in Outlook



29. July 2015

ADDING WEBFONTS

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

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

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.

Enjoy coding …




Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz