sendwithus/templates

Outlook chokes on <link> for webfonts

TedGoas opened this issue · 3 comments

Regarding the mention of linking webfonts in the Notes section of the readme, Desktop Outlook (Windows) chokes on the <link> tag and defaults everything to Times New Roman. Have you experienced this?

Doing something like this can right the ship without using the @import tag.

<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
        <style>
            * {
                font-family: sans-serif !important;
            }
        </style>
    <![endif]-->

    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <!--<![endif]-->

Example from Rob Berinti's TEDC15 talk - slide 46

Hey @TedGoas, we recommend using an inliner — which would solve that issue. Right?

@demoore I don't believe so. It's not a code issue, it's an Outlook issue. This thread on Litmus explains exactly what happens and in which clients. Have you experienced anything like this with these templates?

Good point! I thought you meant it was an issue with the inliner we recommend.
I'll add your example to the Readme

Thanks!