Font Style Displaying Differently...

User 2796847 Photo


Registered User
14 posts

Some paragraphs are displaying my font incorrectly after export. This problem does not seem to affect all of the paragraphs, just some on a random basis.

The attached screenshot shows the BEFORE export in RED on the left and the AFTER export on the right in my email application.

Why does this happen? Why does it only affect some paragraphs and not others?

Any help here would be great. Thanks!
User 232214 Photo


COO
827 posts

My guess is that you are using a Google Web Font. They are not supported by all email clients (unfortunately). In responsive email designer you can specify a safe fall back font though. Try to pick one that resembles your first font choice as much as possible.

The same is true for other properties like shadow and border radius, some email clients support them, others don't. Instead of allowing you to work with the lowest common denominator only, RED follows the principles of progressive enhancement, allowing you to create better experiences for readers using more advanced email clients but with save fallbacks for email clients not supporting a certain feature. :P

Hope this helps!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2796847 Photo


Registered User
14 posts

If what you described were true, wouldn't that affect all paragraph text equally? Some of the paragraphs display correctly and others don't. Why would that happen?
User 103173 Photo


VP of Software Development
0 posts

Attach your project file Jeff so we can see how things are setup. When ever asking for help, posting that first greatly helps. ;)
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2796847 Photo


Registered User
14 posts

Ok, I attached my project file.
User 103173 Photo


VP of Software Development
0 posts

I am not seeing any issues here. I exported your email and it appears identically to what you have setup in RED.

http://s23.postimg.org/r0suh2vzf/export.png

Have you look to see if in your browser that you have not adjusted your zoom settings?

Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2796847 Photo


Registered User
14 posts

I'm not sure why it's displaying correctly now with this view. After I export the HTML I copy it into AWeber or my other email system to send the message and in both of those cases the fonts are not displaying correctly.

The exported HTML seems to show that the paragraph styles are different when they should be the same.

Here is code I extracted from the HTML export for a paragraph that is correct:

<p style="font-weight:normal;padding:0px;text-align:left;margin:0px 0px 1.35em;mso-font-alt: 'Lucida Grande';font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;font-size:16px;line-height:1.7;color:#404040;">

Here is code I extracted from the HTML export for a paragraph that is NOT correct:

<p style="font-weight:normal;padding:0px;text-align:left;margin:0px 0px 1.35em;mso-font-alt: 'Lucida Grande';font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;font-size:16px;line-height:1.7;color:#404040;"><span class="paragraph-text-9" style="font-weight:700;">

It seems that a <span> has been added to the incorrect paragraphs. Why would this happen?
User 103173 Photo


VP of Software Development
0 posts

The issue there is with your sending service. They are most likely stripping out some of the inline styles which can break all sorts of things. Did you run a test using RED itself? If not, try that out and see how it looks. If it looks good there, then this shows RED is working correctly and the issue is with your sending service that you are using.

I can also confirm if you use MailChimp, Mandrill, their sending service works perfectly with RED.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2796847 Photo


Registered User
14 posts

But why is the <span> present at all? Where did that come from?
User 2796847 Photo


Registered User
14 posts

Just to clarify, the <span> is included in the HTML export straight out of RED. This is present before I copy it to my other email service providers.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.