Create a Discussion

Web Fonts Not Displaying [w/ Builder Example]

Ted Goas posted 2015-10-02 19:20:31

I'm having trouble getting basic web fonts to display. I feel like I've done this before but that part of my brain is no longer there.

Example in Builder

Can someone point out what is off with this code? (Needs to degrade gracefully in all Outlook's)

Ted Goas replied 2015-10-02 19:20:31

This seemed to do the trick. In the end I couldn't achieve 0% breakage using @import inside a media query. Odd since so many folks have reported success using this technique.

In this code:

Clients that support web-fonts get Permanent Marker
MSO gets sans-serif
Remaining clients that don't support web-fonts but don't break the inline font stack get sans-serif;

Good discussion in the comments here. This seems more complicated than it has to be, but it passes Litmus.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web font test</title>

<!--[if mso]>
<style>
    * {
      font-family: sans-serif !important;
    }
</style>
<![endif]-->

<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<!--<![endif]-->

</head>
<body>
<table>
    <tr>
        <td style="font-family: 'Permanent Marker', sans-serif;">
            Is this a Web Font?
        </td>
    </tr>
</table>
</body>
</html>

Reply to Ted Goas

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Web Fonts Not Displaying [w/ Builder Example]

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password