I'm trying to use a custom font in my email by importing it in my css like this:
#font-face {
font-family: 'proxima-nova';
src: url('myCDN/proxima-nova-regular.eot');
src: url('myCDN/proxima-nova-regular.eot?#iefix') format('embedded-opentype'),
url('myCDN/proxima-nova-regular.woff') format('woff'),
url('myCDN/proxima-nova-regular.ttf') format('truetype'),
url('myCDN/proxima-nova-regular.svg#ywftsvg') format('svg');
font-weight: normal;
font-style: normal;
}
However, I'm worried that if I import all those formats then my email will get bloated. Is there a standard format that I should be using or is it ok to import all of them?
Thanks!
You can safely omit svg, eot, woff since most email clients do not use them.
https://www.campaignmonitor.com/css/text-fonts/eot/
https://www.campaignmonitor.com/css/text-fonts/svg/
https://www.campaignmonitor.com/css/text-fonts/woff/
In addition, I find I can meet most font needs using <link>. It might be worth considering for your own needs. Just remember to have a good fallback websafe fonts, since Outlook, Gmail and several other popular email clients still do not work with web fonts.
Good luck.
Related
I know that you "can't" use a custom font for your e-mails in tools like ActiveCampaign, but I'm subscribed to a newsletter that does use Open Sans among other fonts. I have asked them how they did it but I didn't received any answer.
I'm receiving the emails in my gmail address, so I know it is possible.
Thanks!
A very few email clients support #font-face in CSS and the use of custom fonts. (See Can I email for details.)
There’s one specificity of Gmail (desktop webmail) which does support fonts like Google Sans or Roboto. But that’s not because it supports #font-face for those, but only because Gmail embeds these fonts itself for its own interface, thus making them available within emails as well.
i'm trying to use a webfont from typekit in mail chimp but the font isn't holding once the email is sent. right now I'm doing it like this
<head>
<script src="https://use.typekit.net/gge4dxp.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
.tagline {
font-family: proxima nova;
font-weight:100;
text-align:center;
}
any ideas? i've looked around and it seems sometimes the head gets stripped out? is there a more sure way to embed this font?
Web fonts are barely supported in email clients. The only places that it is really supported is Apple Mail, iOS, some native Android clients and Thunderbird. Everywhere else just strips the tags. If you know the majority of your subscribers use these email clients, then you should have no issue, but for all others, it may not be worth the font stacking effort.
The other issue you are having is that there are 0 email clients that will accept ANY javascript. This is a security issue, so to stave off any potential threat they wipe it all away.
The only way to bring in a webfont is via #import, via #font-face or <link>.<link> has the best support, but as I said above, all have meager support. For more detailed info on webfonts in email, visit: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/
For typography tips see: https://litmus.com/blog/typography-tips-for-email-designers
I've set up some Magento autoresponders, they all look fine when previewed in admin Transactional emails. However, when they are actually sent to a customer the formatting is different to that of the preview, font size and type varies for different paragraphs within the email - it looks a mess!
There must be css or similar applied at another level, problem is I don't know where or how.
Our Magento was set up by a developer and I'm not convinced that best practices have been followed.
Can anyone shed any light please?
Thanks in advance.
RobH
Email templates will be in app/locale/en_US/template/email/
You can customize them from backend system->transactional emails,
These links may be useful for you :
http://www.webspeaks.in/2011/06/customize-new-order-email-template-in.html
https://www.yireo.com/tutorials/magento/magento-theming/1670-customizing-magento-email-templates
http://www.demacmedia.com/magento-commerce/customizing-magento-transactional-emails/
http://www.gemgento.com/blog/customizing-magento-order-emails
Read comments as well.
Cheers :-)
I've now fixed the problem, posting it here in case it helps any other frustrated amateurs (like me!).
The system templates mostly appear to have an extra " in the h1 tag, this was causing the h1 tag to be applied to the entire body text when creating custom transactional emails. See the middle section of the code below, 11px 0;""
h1 style="font-size:22px; font-weight:normal; line-height:22px; margin:0 0 11px 0;"">Hello, {{htmlescape var=$order.getCustomerName()}} /h1
Cheers
H
Ok, I'd stupidly ignored the 'Template Styles' details, it was empty for the templates that were displaying really badly. I've now included the basic
body,td { color:#2f2f2f; font:12px/1.35em Verdana, Arial, Helvetica, sans-serif; }
info that the rest of the templates seeed to be using. It's better but still not how I want it.
Can anyone advise where this default style can be edited to reduce text size please? I still don't really understand what's going on :-\
I've searching some answer, like this but nothing works.
How can I insert custom fonts (for me is Proxima Nova that I use until with typekit) in a newsletter?
Like as Jukely use in their email hat works on any email client!
Please someone can help me?
Thanks, Enri
Unfortunately Typekit requires Javascript to work, which is a big no-no in emails. You have two options:
You can download and host the font on your own domain, and use #import to link to it (detailed instructions are the same as option 2):
#import url('https://www.mydomain.com/fonts/proxima-nova.css');
You can find a somewhat similar font in the Google Fonts library (such as 'Montserrat'), and use CSS #import, as described in the Campaign Monitor link. You can use it like this:
<style>
#import url(http://fonts.googleapis.com/css?family=Montserrat);
h4 {
font-family: Montserrat, Arial, sans-serif;
color: #444444;
font-size: 24px;
}
</style>
You will still see your back-up font (Arial, sans-serif in the example) in a lot of email clients, so make sure you're prepared for that, but you should be looking pretty good in iOS Mail, Outlook, Apple Mail, Android (default client) and Thunderbird.
#font-face support is much worse in emails, with only the Apple Mail app seeming to support it, FYI.
Sources:
http://css-tricks.com/custom-fonts-in-emails/
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
I'm using some Unicode symbols on a webpage I'm making. For purposes of this example, let's say it's this guy: '☺'.
As I understand it, under the correct implementation of CSS, you can set any font you want, and if it runs into a character that is not present in that font, it will start falling back through the font-family backup choices until it finds one that works.
In light of that, I have my font-family set up like this in css:
font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif
My rationale is that Tahoma comes bundled with Windows. However, I found out online that only some versions of Windows' bundled Tahoma had Unicode support. Helvetica is a font that is similar to Tahoma for Macs. "Arial Unicode MS" comes bundled with Office 2000 and up and definitely support Unicode. San-serif is the fallback in all cases that should also hopefully support Unicode.
For the most part, this works well. However, as it is wont to do, Internet Explorer seems to be ruining my well-laid plan. I can't figure out what the pattern is, as I'm seeing it on one computer running Vista with IE8, and another on Windows XP with IE7, but it works fine on my development machine with Win7 with IE8/IE7 Tester/IE6 Tester. I have found the claim on some obscure webpages that on old versions of IE, it will only look for the first font that it has, and then use that for everything, even if that font is missing a given symbol, but this doesn't explain why it's happening on Vista/IE8. Thus, my lovely Unicode symbols turn up as boxes to some, but not all IE users.
What's the recommended way to be handling Unicode symbols on the web? Are they just not usable for projects where wide browser compatibility is needed? Should I be looking to include code specifically to handle old IE? Are there any other gotcha situations or platforms I should be worrying about?
Edit: Updated with new information on systems this is failing on.
only some versions of Windows' bundled Tahoma had Unicode support
It's not really “Unicode support”. Tahoma supports Unicode in as much as it has Unicode code point lookup tables. That doesn't mean you get a glyph for every character defined by Unicode... actually almost no font has glyphs for every character.
No version of Tahoma includes a glyph for U+263A White Smiling Face, so your code is a test of font fallback capabilities, something IE (especially IE6) is bad at, compared to other browsers. A more common Windows-bundled font that does include U+26A3 is plain Arial (not “Arial Unicode”), since version 3.00 (included in WinXP).
You can use IE overrides in your CSS file to create different behavior for older versions of internet explorer. The over-rides are # and _ before each statement depending on the version of internet explorer.
Put an _ before each statement in your css for internet explorer 6.0 and earlier
Put a # before each statement in your css for internet explorer only
Example:
//Normal
font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;
// IE 6.0 Earlier
_font-family: Tahoma, Helvetica, sans-serif;
// IE Only
#font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;
As I understand it, under the correct implementation of CSS, you can set any font you want, and if it runs into a character that is not present in that font, it will start falling back through the font-family backup choices until it finds one that works.
Unfortunately, that's not how it works in Internet Explorer, at least not in older versions. These browsers only use the first font family available on a system. One approach I sometimes use is to add a separate CSS class for Unicode characters:
<span class="unicode">[Unicode character]</span>
.unicode { font-family: "Lucida Sans Unicode", ..., sans-serif; }
I found Lucida Sans Unicode to be a good choice as it's preinstalled on all Windows versions since Windows 98. Its Unicode support isn't as complete as you'd expect, though.
But I started to prefer icon fonts. They have the advantage that the glyphs always look the same regardless of the font actually used. As John Slegers mentions in his answer, there are great online tools to create your own customized icon font.