I've been trying to incorporate google webfonts in MailChimp and can't get any solutions to work.
I've tried the approach listed on Campaign Monitor's site using #import:
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
but I get this error when trying to preview:
An error occurred parsing your template CSS:
Cannot find a CSS file at: http://fonts.googleapis.com/css?family=Montserrat
Has anyone been able to use custom fonts within MailChimp?
It turns out it's not possible through the #import syntax. It does work using tag:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
I use custom fonts in all of my emails but not through google. If your having trouble using Google's webfonts I recommend you host the file on your own server and try to use that instead.
For me, I import my webfonts stylesheet like so:
#import url('https://www.mydomain.com/en/img/cms/mail/_a/fonts/fonts.css');
I also add a conditional-comments below my style declarations to enhance webfont fallbacks in outlook. Without this, Outlook will likely substitute your webfont for whatever it feels like, and not respect your fallback font. But if you declare this conditional comment and then wrap your text with an additional span with the class, Outlook will respect your fallback and use the font you decide.
<!--[if gte mso 9]>
<style>
.flowerpwr { font-family:Arial,sans-serif; }
.proxima { font-family:Arial,sans-serif;font-weight:normal; }
.proxima_novasemibold { font-family:Arial,sans-serif;font-weight:normal; }
</style>
<![endif]-->
The html markup looks like this:
<td align="center" style="font-family:'proxima_novaregular',Arial,sans-serif;font-size:16px;letter-spacing:0.04em;color:#333333;">
<span class="proxima">Text here</span>
</td>
This even works for styling image alt text like so:
<td>
<a href="https://www.mylink.com/" target="_blank" style="display:block;font-family:'proxima_novaregular',Arial,sans-serif;color:#666666;font-size:16px;text-align:center;letter-spacing:0.04em;text-decoration:none;outline:none;">
<span class="proxima">
<img src="a3.jpg" alt="STYLED ALT TEXT WITH WEBFONT AND OUTLOOK MAINTAINED FALLBACK" border="0" style="display:block;">
</span>
</a>
</td>
I have been building emails a lot using mailchimp recently and I had been scratching my head over this for a while. These are my findings:
works for google fonts.
#import works for fonts hosted through other sites then google (for ex. your personal site)
using something like:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
using #import for google fonts gives you an error in mailchimp (like the one horizens posted).
base64 works as well. But the code can get way to long and cause other problems.
Firefox blocks the fonts in Mailchimp preview (because it's https).
PS: different but related topic: Making responsive emails is not as terrible as the people of the internet claim.
Related
I'm creating a HTML email newsletter. I'm using webfonts served by Typekit. It is well documented that versions of Outlook using Microsoft Word to render the email don't use the specified fallback font, but Times New Roman (see https://litmus.com/blog/the-ultimate-guide-to-web-fonts).
The work around is to target Outlook and use a different font stack:
<!--[if mso]>
<style type=”text/css”>
h1 {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
My question is: where does this code go?
In the <head>?
In the <body>?
I'm guessing it goes in the <head>, but below the main CSS hence below the </style>?
But I've noticed that when I import the code into my Email Service provider (Direct Mail for Mac) strips out this "invisible code". Why is the code between <!-- --> surely this makes the code invisible/not work?
It may be a little confusing, but email clients read if/else statements even if they are hidden by <!-- -->.
Email clients interpret this as please do: <!--[if !mso]><!-- --> and Outlook interprets it as please ignore. This does just the opposite: <!--[if (gte mso 9)|(IE)]><!-- -->
Example:
https://jsfiddle.net/wallyglenn/5hruzos5/
Outlook Desktop client does not work with most webfonts like Google fonts. Instead of using a fallback font, Outlook will use it's own fallback font, Times New Roman. This is great if you're using a serif font, but if you're not, it can seriously affect the look of your email.
Using if/else, you can target Outlook specifically to use a websafe fallback font by creating a custom style sheet. The preferred location is after the style sheet you use to target all email clients, since the last style listed is the one that gets used. If your email calls for a webfont like Gotham or Lato, this style sheet will direct Outlook to use Arial or a sans-serif font:
<head>
<style type="text/css>
css for email clients
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body, table, td, a, h1, p {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>
The reason for the gte mso9 is that Outlook 2007 (mso version 9 and above) started using Microsoft Word as a formatting engine. This caused compatibility issues with web standards, but helped ensure that a document designed in Word looks appropriate in Outlook email. You can target specific versions of Outlook by using the mso number.
An example of if/else in email body:
<!--[if (gte mso 9)|(IE)]><!-- -->
starting code for Outlook specific thingy
<![endif]-->
[fallback goes here]
<!--[if (gte mso 9)|(IE)]>ending code if needed<![endif]-->
I hope that helps.
Good luck with Outlook.
I have made an email signature in Outlook (2016) by pasting HTML in the window where one can type a new signature (File>Options>Email>Signatures>New).
It looks good when sending a mail, it shows all images. The receiver of the mail (on any other mail client but Outlook, e.g. on Apple Mail or Gmail) can see the images too, but when this receiver using Apple Mail or so is going to reply to this mail, the images in the signature of the originally sent email have disappeared and have been replaced by
<image001.png> (referring to images saved locally within C:\Users\[name]\AppData\Roaming\Microsoft\Signatures, in the respective [signature name]_files folder, while the src of the original <img/>s in the signature are URLs to actual accessible files on the web). These images can be displayed anyway by clicking a button to 'include attachments of the original mail', which is, let's say, weird. It apparently turns the images in Outlook-signatures into attachments, which are being blocked or so, as it seems.
Has anyone had a comparable problem, and/or is kind to share a solution for this issue?
Thank you in advance.
Try adding ? and then a random number at the end of your image URL. Also, make sure you are using a CDN to deliver the image. I use cloudinary.com...
Here is an example of what I did...
<table cellPadding="0" cellSpacing="0">
<tbody>
<tr>
<td style="vertical-align:top"></td>
<td>
<div><font size="4">Name</font></div>
<div>Title</div>
<div><span style="margin-right:8px">phone</span></div>
<div><span style="margin-right:8px"><a style="color:blue" href="mailto:email">email</a></span></div>
<div><span style="margin-right:8px">address</span></div>
<div style="padding: 0 0em 2em 0;">
<img src="http://CDN/Facebook.jpg?7" alt="Facebook" />
<img src="http://CDN/Twitter.jpg?5" alt="Twitter" />
<img src="http://CDN/Instagram.jpg?3" alt="Instagram" />
<img src="http://CDN/Linkedin.jpg?2" alt="LinkedIn" />
</div>
</td>
</tr>
</tbody>
I open this HTML in my web browser, copy and paste it into the signature section of Outlook. One caveat.. I am using the Outlook Web Browser for my email, not the Application.
I have been testing:
Outlook -> Gmail -> Outlook, and my signature stays intact.
So far this has been working for 2 days. I am going to keep testing but give it a shot and let me know if you see the same good results.
I am new to Sitecore. I am looking to create a custom email template for an email campaign. I am using Sitecore 8.1 with EXM 3.3. I Have been trying to implement the following walk-through:
Walkthrough: Building a custom message template
However, when I create a new email campaign with my new template, I am unable to assign components to the various placeholders on my aspx page. I have proved that the aspx file is the correct file in my Sitecore website by adding plain html to the file and seeing the results displayed in the body section of the message tab in the EXM application, as you can see from the following screen shot.
Below is the code for my Email Template:
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Analytics" %>
<%# OutputCache Location="None" VaryByParam="none" %>
<html>
<head>
<title>
<!-- Used for storing title of the email -->
<sc:Placeholder runat="server" Key="mn-title"/>
</title>
<!-- The VisitorIdentification control ensures that people viewing this page
with a traditional web browser will be classified as humans not bots.
This control is not required if people only view messages using Email clients -->
<sc:VisitorIdentification runat="server" />
</head>
<body style="background-color:gold">
<label>test html label added here!</label>
<form method="post" runat="server" id="mainform">
<table style="width:100%">
<tr>
<td colspan="2" style="background-color:blue;color:green;width:100%">
<!-- Used for storing the title of the newsletter in h1 -->
<sc:Placeholder runat="server" Key="mn-header" />
</td>
</tr>
<tr>
<td style="background-color:white;color:black;width:100%">
<!-- Used for storing the content blocks of the newsletter in h2 and paragraphs -->
<sc:Placeholder runat="server" Key="mn-content" />
</td>
</tr>
<tr>
<td colspan="2" style="background-color:blue;color:green;width:100%">
<!-- Used for storing the footer e.g. the unsubscribe link -->
<sc:Placeholder runat="server" Key="mn-footer" />
</td>
</tr>
</table>
</form>
</body>
</html>
The html code contains the following placeholder keys:
<sc:Placeholder runat="server" Key="mn-title" />
<sc:Placeholder runat="server" Key="mn-header" />
<sc:Placeholder runat="server" Key="mn-content" />
<sc:Placeholder runat="server" Key="mn-footer" />
When go to the Message tab for my email in EXM and choose the Add component button, I get the "Add Here" buttons on my page but am unable to choose any renderings to fit the mn-header and mn-footer components. The mn-content allows me to choose from several predefined renderings as seen in the screen shot below:
Have I missed something important here? How can I select/choose what renderings are available for my placeholders?
The Walk-through contains five sections that need completing:
Create a branch template
You can see from the following screen shot that this section is configured correctly:
Create template
You can see from the following screen shot that this section is configured correctly:
Create the layout
You can see from the following screen shot that this section is configured correctly:
Bind the layout and the message template
I'm pretty sure that I have managed to complete the first 3 sections of the walk-through correctly but when I try to complete the section "Bind the Layout and the message template", point 5 of the walk-through says:
On the Controls tab, add the relevant controls. As a minimum add the following two controls:
Target Item – in /Renderings/Email Campaign.
Set Page Title – in /Renderings/Email Campaign.
But I don't have "Target Item" as an rendering to add in this case as you can see from the following screen shot:
So I have added the following components in the Device Editor from the available renderings as seen in the following screen shot:
Make your template available in EXM
You can see from the following screen shot that this section is configured correctly:
Any Ideas what I am missing or doing wrong? Thanks in advance!
I think documentation for creating custom template is not yet updated for Sitecore EXM 3.3.
I dont think Set Target Item is needed any more. I have installed sample newsletter package and I dont find it using that.
Regarding your question.
You need to create data source item and assign it to your control's data source property.
I would suggest you to install sample newsletter package (came with default exm module package) and see it's structure and presentation details on Message root item. I have attached the one I have created.
For your Scenario you need to create item under message root using "custom newsletter ll content" template and assign that item as a data source for Display body control.
Hope this helps!
Sample News Letter from Sitecore : No Target item present.
Newsletter item with datasource
Now go to presentation details of Root item and attach this data source to renderings
I'd like to send both text and html versions of emails, but have Outlook users always only see the text version. Is this possible?
Trying to target a client through MIME is impossible as far as I can tell. You can however wrap everything inside your HTML <body> (including your style tag if you have one) in:
<body>
<!--[if !mso]><!-->
HTML CONTENT GOES HERE
<!--<![endif]-->
and then right before your closing </body> put the plain text version you want Outlook users to see inside this:
<!--[if gte mso 9]>
PLAIN TEXT GOES HERE
<![endif]-->
</body>
Working on an HTML email, we've gotten the email to render properly everywhere: Outlook 2010, Mozilla Thunderbird, Horde/IMP, Gmail, Yahoo, etc. etc. However, when the email is checked via the Outlook Web App (Exchange 2010), the HTML email is incorrectly rendered sometimes.
The two issues we're seeing is that in Internet Explorer and Firefox, the font-size CSS in-line directives aren't respected and in Firefox, a gap is put between the table cells, breaking the image. This only happens when the message is NOT in the Inbox. If we drag the message from a folder into the Inbox, the problems disappear. Drag it back into a folder and they reappear. If we open the message in a new window (instead of in the preview pane), the message renders properly.
I'm guessing the CSS of the Outlook Web App is interfering, but I'm hoping someone has had a similar issue and might be able to shed some light on how we can fix this problem.
Here is the relevant message source as seen in the client:
<html>
<head>
<style>a{color:#BF0005}</style>
</head>
<body bgcolor="#F5F5F5" style="margin:0;text-align:center">
<table cellpadding="0" cellspacing="0" style="width:604px;margin:0 auto;font-family:Tahoma,sans-serif;font-size:10pt;line-height:16pt">
<tr>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:2e39cc62f2ab417d1b9461b437c72ffc" width="10px" height="410px" /></td>
<td style="padding-top:10px;margin-bottom:0;vertical-align:bottom;width:584px;height:84px"><img style="vertical-align:bottom" src="cid:5ed2b7dfeca322e0d1e0b40bd3a0a48d" width="584px" height="84px" alt="Image Alternate Text Here" /></td>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:6f108f42f85401cababf9d5dc64fb8f9" width="10px" height="410px" /></td>
</tr>
<tr>
<td style="vertical-align:top;text-align:left;background-color:#FFF;padding:0 50px 40px">
<h1 style="text-align:center;margin-top:15px;font-size:12pt">Header</h1>
<p>This is a test email.</p>
</td>
</tr>
<tr>
<td colspan="3" style="padding:30px 50px;font-size:8pt;text-align:center;color:#888888;line-height:10pt">Footer text</td>
</tr>
</table>
</body>
</html>
EDIT: I've done some digging into the source via Firebug, and I think I've narrowed it down to being a problem with the Outlook Web App. In the Inbox view, the body of the messages are encapsulated in an <iframe> and the contents of the HTML message are unchanged. However, viewing the source of messages in other folders, no <iframe> is used and the <body> tag of the message is converted into a <div> by OWA. The message is then incorporating styles from the OWA style sheet that seem to be overwriting the inline style of the HTML email.
I think we're going to open up a ticket with Microsoft.
Unfortunately, this problem is a Microsoft issue. We've opened a ticket with them a while ago, but have not heard back. Therefore, we'll just have to make do.