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.
Related
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 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
Im making a email template and they wanna put background images underneath the text - and to most email clients that is a no no.
So i tough can you make a fallback to the clients that don't support it?
Or is their a hack to make it work?
On this picture you got a list over css support
also see this link
There is a technique that is supported by all major clients: emailbg.net. The VML is a hack for Outlook which doesn't support CSS background images (except in the body tag).
You should always set a bgcolor however as most clients load with images disabled.
I have a template which i used for sending emails written purely in hand made with css, and then i tested in Firefox/InternetExplorer/Chrome browser. But when i send that email to My boss PC as he is always Microsoft outlook user.
He always gets the alignment broken, texts broken all problems start. My question is how do you really write then? None of the web browser showing my template wrong.
I searched a lot, but most answers are not deeply and correctly well answered about this. I would really appreciate some experts input on this.
Thanks
outlook uses an older version of Trident, the CSS rendering engine. Depending on what Outlook your boss is on, the worse it can get. Outlook 2010 actually reverted to an older version of Trident because of Microsoft losing the Anti-trust case with the EU, so whatever version was before 2010 actually renders better, however they are both quite subpar # best.
you're going to want to literally stop developing with modern html/css and fall back on old school table layouts. i know, its gross, but you're going to have to do it for email.
the best tests are native, but if you don't have access to both versions (not many do) you should check out EmailOnAcid.com, they provide a plethora of email clients you can test on.
constantcontact.com, mailchimp.com and campaignmonitor.com all offer more than testing services if you need anything else.
Outlook 2007 is the bad guy. Any newer or older is much better. In Outlook 2007 lots of CSS commands don't work.
See this page: http://www.email-standards.org/ for details.
However, try sending your emails to Gmail.com and see how it gets displayed in Gmail web interface - Gmail is quite restrictive and as a rule of thumb, if it displays nicely, it should look good in other web clients too.
Some advice regarding HTML emails:
Outlook
It is good to provide width for Outlook, otherwise the CSS may crash.
Outlook doesn't support padding for <div>s / <p>s, float and various other things.
Gmail
For Gmail, you should use inline CSS in preference to defining classes.
Gmail actually parses CSS provided by you and for instance, changes height to min-height so using height is useless. However min-height of <td> is not respected by the browsers, so internal <div>s inside <td>s can be used to assure that min-height was applied.
Gmail strips background images, and generally in all email clients images are displayed upon user request for security reasons. Therefore, wrap images with <div> and set background color and color of this outer div, and provide alt (alternative text) for image (note also that images with empty src do not preserve width and height while rendered by the browser).
I have a question related marquee element? is marquee or any Js function work in mail, like gmail, yahoo mail, outlook etc.
If yes than how please define.
This is a blog post (from 2010) explaining <marquee> support in different clients:
http://stylecampaign.com/blog/2010/08/animating-emails-using-the-marquee-tag/
Notably, Gmail, Outlook and Thunderbird are not supporting this, but Yahoo and Hotmail are supporting.
As far as HTML marquee element is concerened so Answer is yes because most email clients have ability to process HTML elements in BODY here is an working example.Go through it.
if you wish to use advance JS then i think your needed javascript files must be located on server on the internet and you can use the javascript function animation etc in email body though i am not very sure but i think it should do like this.
I read somewhere that using scripts in your email may force your email/newsletter to be spammed by the email client so better not using it.
Alternatively if you wish to include common animations like image slideshow and you not having many images then using gif of your images may help you.
Thanks!!!