I am trying to code an email template with the "Walkaway font" using HTML, however, it does not display properly. The template should be later on sent via MailChimp. As the font is non-standard, what is the best way to do it?
For best results on the web, be sure to use woff or woff2 format.
Note that only Apple Mail and some others support custom web fonts. You'll need a fallback font for those that don't support custom web fonts.
Upload your font somewhere, on a server that allows cross-origin requests (see Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy for specific details on how to setup the server for that).
<head>
<style type="text/css">
#media screen {
#font-face {
font-family: 'Walkaway';
src: url('https://www.xyz.co.uk/webfonts/Walkaway.eot');
src: url('https://www.xyz.co.uk/webfonts/Walkaway.eot?#iefix') format('embedded-opentype'),
url('https://www.xyz.co.uk/webfonts/Walkaway.woff2') format('woff2'),
url('https://www.xyz.co.uk/webfonts/Walkaway.woff') format('woff');
font-weight:400;
font-style:normal;
mso-font-alt:Arial;
}
}
</style>
</head>
<body>
...
<p style="font-family:Walkaway,Arial,sans-serif;">Hi there</p>
...
</body>
Mso-font-alt takes a single value, and is the fallback for Outlook specifically. Others will use the fallback specified in your font-family in your <p> or other tags.
Copy-paste the entire #font-face if you want another font, such as the bold or italic variants. Then just change the src, the font-weight and font-style accordingly. You will use the same font-family name for each of these variants (ie. 'Walkaway') if they are the same font.
Related
I am sending emails to users which includes a one-time authentication link. I am trying to develop a feature through which if a user forwards the email to some other user, the links should get disabled.
One way is to hide the link by using a style tag which is covered here:
<style type="text/css">
blockquote .original-only, .WordSection1 .original-only {
display: none !important;
}
</style>
<p class="original-only">
Content to be hidden Unsubscribe.
</p>
Is there a better/standard way to achieve the same? I would prefer to keep the link visible but clicking on the link will take the user to my web where I can check URL params to validate if the email is original or forwarded.
I don't think it would work, but for a different reason - Office 365 can "probe" the link first to see if it points to anything untoward. Your server would register a hit, but it won't be coming from a user.
A foolproof way forward is essentially not possible, although you may be able to do it with some success on some platforms. (There isn't even a way to target all email clients individually on a straight send--let alone on a forward!)
What happens when you forward an email is that the email will be re-rendered, often without the accompanying embedded CSS that you are relying on (it depends on the email client).
So the reference to the class would be lost, and your link would now show after a forward:
<p class="original-only">
Content to be hidden Unsubscribe.
</p>
Furthermore, I see what you are trying to do there, in predicting that a forward would add a blockquote or a style like WordSection - but not all behave predictably, or if they do, you can't target them. For example, Gmail will add a class that begins with something like "_m" (from memory), but although CSS can target that with an [attribute^="value"] selector, most email clients will ignore this 'advanced' CSS.
In fact, you may have more luck reversing this:
<style type="text/css">
blockquote .original-only, .WordSection1 .original-only {
display: block !important;
}
</style>
<p class="original-only" style="display:none">
Content to be hidden Unsubscribe.
</p>
I haven't tested it, but if you sent that to, say, Gmail (noting some Gmails are different from others, e.g. IMAP/POP accounts), which DOES support embedded CSS, you would see the unsubscribe link. But forwarding might just remove the embedded CSS and so the display:none would kick in and hide the link.
However, if you sent it Outlook desktop, which does NOT support embedded CSS (anything in <style>...</style>), it would hide the unsubscribe link by default, as well as keep it hidden on a forward (probably).
Results are likely to be all over the place.
Okay i am a little confused here. I am trying to send a test email of my html email i have to gmail, but my media queries are not taking effect. I am targeting screen as shown in tutorials.
i have my media queries setup like:
#media screen and (min-width: 1050px) { DO STUFF }
Additionally i have tried to add google fonts to the email but they dont show, i have linked them in the head:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
is there a method to target available width of space inside email? Gmail opens emails up in a smaller window right, so i need to target that?
Gmail does not currently support media queries.
http://kb.mailchimp.com/mobile/campaign-behavior-on-mobile?_ga=1.60711151.37688562.1434776314
Gmail does not support Google web fonts either.
http://templates.mailchimp.com/design/typography/
One option, if you absolutely needed the font, would be to implement
the typography as an image. This is not ideal, but works.
In my ColdFusion program I create email (HTML/CSS) for one or many recipients, and place it in a .cfm file. The email is nicely formatted. When I run the saved file as a program, the cfmail tag sends the email along to whomever, and that is all working. However, along the way, my formatting gets lost. I understand that there is no reason for my local CSS to be functioning when the email gets to its target. But it would be nice if I could preserve the formatting I started with.
Does anyone have a suggestion about how I might do this.
If you're not including the attribute type="html" in your cfmail tag, that could be affecting the formatting of your email. Also, within the cfmail tag, embed your style within in addition to your content. For example:
<cfmail from="foo#bar.com" to="foobar#bar.com" subject"test" server="mymailserver" type="html">
<html>
<head>
<style>
.test { color: ##cc0000; }
</style>
</head>
<body>
<div class="test">This email is in red</div>
</body>
</html>
</cfmail>
Styling emails can be tricky as it's different across clients - there are whole blog articles devoted to this. For example, styles in the head section get ignored in some clients and recognised in others. Sadly, inline styles seems to be the "best" approach.
There is a good overview on the campaign monitor website of what works if which clients:
https://www.campaignmonitor.com/css/
Mailchimp have a handy tool which will inline styles for you based on your HTML/CSS:
http://templates.mailchimp.com/resources/inline-css/
It's also worth including a plain text version for maximum compatibility. You can do that like this:
<cfmail to="someone#somewhere.xyz"
from="me#here.xyz"
subject="Hello!"
type="html">
<cfmailpart type="text/plain" wraptext="60">
Hello,
This is plain text version
</cfmailpart>
<cfmailpart type="text/html">
<h3>Hello</h3>
<p>This is <b style="color:red;">HTML</b> version</p>
</cfmailpart>
</cfmail>
Does anybody know if it's possible to create an exacttarget email template - ET Template NOT a regular htmlPaste email - without any pre-embeded code?
The problem I'm having is ET automatically puts in head and body tags and wraps everything in a 600px wide table.
The 600px wide container overrides my code to make the email responsive for iphones.
Thanks.
Ahh, you must be trying to test a responsive template and email.
Here are a couple of work-arounds:
ExactTarget Support can disable the default headers and footers with a special business rule.
Create a Delivery Profile that includes blank header and footers (either none or blank content areas) and send your tests using a a Guided Send with the Delivery Profile
i beleive you can create a support ticket to update the Default Header & Footer in the Exact target Application.
Responsive Header block should contain:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Responsive Footer block should contain:
</html>
This will do the trick.
Hope it helps:)
Is it possible that several mail applications (e.g. Hotmail, Thunderbird, OSx Mail) replace the whole <img> tag?
In the generated newsletter i have e.g.:
<img style="padding: 0px 10px 0px 0px; outline: none; " class="editor-img" src="/upload/11/2_5.jpg" alt="image" width="165" height="107">
and in the received newsletter i got something like:
<img src="foo" border="0">
Can someone explain me that and how i can prevent this?
Thanks
Yes this is absolutely possible. For instance T-Online in Germany exchanges images ending on .php with a dummy image. Many webmailers parse and adapt email code before it is finally rendered in the inbox. Like Gmail tel:-links numbers of which it thinks it's a phone number. In your case, the relative path doesn't make any sense. Try an absolute image path like src="http://www.YOURDOMAIN/upload/11/2_5.jpg".