CODEWITHSUNDEEP
cssemailbuttonmailchimpmandrill
nephiw
nephiw

Reputation: 2046

How can build a mailchimp template with a button that uses the font Latos that will export to MandrillApp an not break?

Today, if you build a MailChimp email, using the drag and drop editor, with a button that uses the Lato font, then you export it to Mandrill for use with transactional emails, the button breaks. It ends up looking like this:

login button with padding missing

Instead of like this:

login button with padding

Has anyone else experienced this and has anyone found a good solution?

Upvotes: 1

Views: 617

Answers (1)

nephiw
nephiw

Reputation: 2046

The export makes the button look like this:

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
    <tr>
        <td style="padding-top:0; padding-right:18px; padding-bottom:18px; padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
            <table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border: 2px solid #FFFFFF;border-radius: 6px;background-color: #B6121B;">
                <tbody>
                    <tr>
                        <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 12px; padding: 12px;">
                            <a class="mcnButton " title="Login" href="*|SITE_URL|*/home" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;">Login</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>

Pay special attention to what it did to the font-family of the mcnButtonContent - it wrapped the fallback font (Helvetica Neue) in escaped quotes. This is the problem because when it is rendered in the email client it prematurely closes the style tag.

The way that I solve this is to replace the quotes with single quotes every time I export the MailChimp template to Mandrill. This is tedious and easily missed, but the only other solution is to use a different font which my Marketing department does not want.

Upvotes: 3

Related Questions