Create a Discussion

Web Fonts Not Displaying [w/ Builder Example]

Ted Goas posted 2015-10-02 02:20:58

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

Katherine Russinger replied 2018-09-25 18:49:01

THANK YOU! This is the one fix that finally worked for me and I have tried many!

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