Updated 10.15.15:  This post has been updated for accuracy.

Web fonts on websites give designers undeniably better creative options. The use of unique, compelling typography reflects the brand identity of the website. Web fonts add support for fonts that are not installed by default in a browser and are supported by all modern web browsers. Examples of web fonts include the popular simple and clean looking Open Sans to the distinctive Roboto Slab or the stylized Lobster.

web fonts in email

However, when it comes to email, support for web fonts for email is very limited and incorporating them into your designs can present some interesting challenges.

If you’re adventurous or you require that extra brand fidelity for your emails, and don’t mind carefully selected fallbacks for clients that don’t support web fonts, then read on!

Which email clients support web fonts?

The best support for web fonts come from the Apple ecosystem – iOS Mail and Apple Mail. Web fonts were also supported by the Android native email client but starting with the Lollipop Android releases, Google replaced the email client with the Gmail mobile app, which in addition to not supporting style tags, do not support web fonts as well.

The remaining popular email clients have either nonexistent or limited support for web fonts. Specifically, these clients do not support web fonts:

In fact, Outlook also has a particularly gnarly web font bug that we’ll go into later.

More information about font support can be seen in this guide.

Using web fonts in email

When it comes to web fonts in email, you have two options: Host the fonts yourself or use a web font hosting service.

Hosted web fonts

While there are several web font hosting services, the easiest option to get your feet wet is to use Google Web Fonts. Google Web Fonts provides you with a wide library of free fonts as well as an intuitive user interface to generate the necessary font stylesheet to insert into your email.
Here’s a quick overview on using Google Fonts:
Using Google Web Fonts, use the search filters to find the font you need, using either the name of the font or the characteristics.

web fonts in email

Once you have found your font, click on the quick use button. The service will package the font into a stylesheet that you can paste in the <head> of your email.

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

If you inspect the stylesheet, you will notice one or more @font-face rules defining the font as well as several links to download various formats of the font.

Now wherever you need to use the font, just refer to them with the font-family CSS style.

<p style="font-family: ‘Lobster’, Arial, sans-serif; font-weight: 400;">TEXT</p>

You should also make sure to select an appropriate fallback web font or “websafe font’– so that email clients that don’t support web fonts will use one that comes pre-installed. Some fonts are more web safe than others. In our example above, we’ve selected ubiquitous sans serif Arial font as a fallback.
An alternative option to use web fonts is to use the @import rule rule within your CSS. However, using a linked font stylesheet is the most straightforward and has the highest compatibility.

Hosting your own fonts

If you have been provided fonts to use for the email, you can host them on your own server and use the @font-face rule. One drawback to this approach is that you may have to do some tests to ensure that the fonts are compatible with the email clients you intend to support. StyleCampaign provides a good primer on this.

@font-face {

  font-family: 'My Font';

  font-style: normal;

  font-weight: normal;

  src: url(https://myserver.com/example.woff2) format('woff2');


Outlook web font bug

As with many things email, web fonts come with its own particularly annoying problem. In this case: Outlook 2007/2010/2013/2016.

If you use a web font in your email, Outlook will ignore your fallback font and render your text using Times New Roman, a serif font, even though you might have specified sans serif fallbacks.
When Outlook encounters the @font-face rule in your stylesheet, Outlook registers the font name but does not process the font itself. When the font is used in your email, Outlook swaps the font with its default font: Times New Roman. The trick is to not have Outlook register the font in the first place.

You could make Outlook render your selected fallback font by hiding the linked stylesheet from Outlook by wrapping it within an Outlook conditional comment.

    <!--[if !mso]><!-- -->

    <link href='http://fonts.googleapis.com/css?family=Lobster’ rel='stylesheet' type='text/css' />


Outlook will ignore the linked stylesheet above and since it regards the Lobster font as simply missing, it will fall back to the next font in your chain which is Arial. Yay!

Others have found different ways to address this quirk such as using the font tag with the face attribute or overriding the web font styles in a CSS style block within a media query as Outlook ignores CSS within media queries.
@media screen{
  .webfont {
      font-family: ‘Lobster’, Arial, sans-serif !important;

Should you use web fonts?

Using web fonts has its advantages and challenges, but if you have a large audience reading your email on Apple devices and are careful, you can take advantage of the added design flexibility without running into some of its problems.

*Special thanks to Justin Khoo from FreshInbox for his contributions in updating this post.


Send beautiful email campaigns Campaign Monitor makes it easy to attract subscribers, send them beautiful email campaigns, and see stunning reports on the results. GET STARTED FOR FREE
  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Remy – thanks for the great reminder and as always, for your support. :)

    Justin – You’re right, they only support Javascript embedding for now – that’s a real shame. Definitely an oversight on my part then, so I’ve updated the post. Off to Google Fonts it is!

    Mat – That’s not a bad idea, as I know Facebook do the same with sound files for the same reason. For Android in particular, there could be some real benefit, so I’ll pass that on to the team. :)

    abimael – No…. ;)

  • http://www.practiceofcode.com Jay

    What does the “i” for Outlook in the table mean?

  • http://www.campaignmonitor.com/ Buzz

    @Jay – The “i” indicates that web fonts are only supported in Outlook 2000. Neither a definite yes or no.

  • http://www.sevenfiv.com Irshad Ahamed

    What is the use or purpose of this if it is not working in Gmail/Yahoo/Outlook.com/Aol..etc? This is useless, better to use image to create fancy text in emails.

  • http://www.campaignmonitor.com/ David Greiner

    A quick note to those not sure how useful this technique will be, it’s all about your audience. With Campaign Monitor for example, more than 60% of our subscribers use Apple Mail, iOS or Android, so for us the effort would likely make sense.

  • http://www.x-factory.be Manu

    Very interesting information, but as long as those figures become way more significant (I’m talking about 90% rather than 50%) it’s not something I’m going to be able to sell to my clients.

  • http://scottm.co Scott

    Great information about using @font-face over <link> structure. I’ll be using this with http://autoletter.io when it’s launched.

  • http://emailblog.eu Remy Bergsma

    So glad you left out Comic Sans MS Ros ;)

    But in all seriousness: nice post, very good overview of web fonts use in emails and their support (or non-support) in email clients.

    I’m all for having text be in true fonts instead of in images – not just because it will be visible even when images aren’t loaded (yet), but also because you can make links out of separate lines of text more easily than within an image – even when you’re using image maps.

  • http://www.iamhtml.com Farzad Qasim

    Considering the large amount of outlook users to date, i dont think this is of much practical use. Without media queries its actually quite useless.

  • http://www.communicatorcorp.co. Stephen

    See what you’re saying about 30% being better than none Ros but when you have clients who demand that their ‘brand font’ be used – they won’t stand for it to fall back to the nearest websafe version.

    They best way to do it is still images in my eyes (in conjunction with typed text of course).

    Although the thread seems to suggest support is good the results seem to differ slightly. No support for Gmail, Yahoo Mail, Windows Live Mail or Outlook.com, not to mention the likes of Outlook 2007 / 2010… you’ve got to ask, is it worth it?

  • http://instanceof.me streetpc

    “[…] they’ll display regardless of whether images are turned off in the inbox.”

    A precision: The text will be displayed, but not necessarily with the right font, which makes it unsuitable for, say, using icon fonts. Would be worse than using an image because you cannot replace with alternative text like you do with images.

    Also, I don’t get why some clients (apparently Android and Thunderbird) authorize @import by default while blocking images, that’s basically the same privacy issue, isn’t it?

  • Mark

    But basically using webfonts is going to be seen by less than 10% of my recipients. That doesnt seem particularly useful. Without Yahoo, Gmail, Microsoft, or Outlook, we are basically talking about people using phones to read their email.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hey all, thanks for the great feedback so far! Happy to provide my opinion on a few things here :)

    @Ricky – The notable thing about this technique is that while folks who have email clients that support web fonts will likely benefit from a ‘tidied up’ appearance, whereas those who don’t will really be none the wiser. Even if only 30% of subscribers benefit, is that better than no benefit at all?

    From personal experience, I dare say that much of the desire for a ‘consistent’ experience is client-driven. I’d argue that we shouldn’t always design for the lowest common denominator, but simply ensure that whatever fancy things we add degrade gracefully. This is all perfect-world stuff and perhaps a good topic for a blog post!

    So yes, I’m all for tricking up newsletters, as long as it doesn’t impact usability and the overall message. Plus it has to degrade well, even in worst-case scenarios (eg. images off, Lotus Notes) :)

    @Jonathan – That’s a great tip, thanks for sharing that link!

    @Marco – I think the comparison with background image support is very apt. I’m looking forward to seeing your future newsletters :)

    @Mark – Of course, the number of folks a technique like this will benefit will vary from sender to sender. However, in our last email client popularity report, we found that the email clients that supported web fonts accounted for almost 50% of all recorded opens – for others, it may even be more. With a different list, you may find that you’ll have enough mobile/iOS recipients to make a simple technique like this one an attractive option.

    Thanks, everyone! Really enjoying the conversation here, so feel free to chime in :)

  • http:// Rakesh Patwari

    Great post with real good points over the conversation too.. I would say conversations add lot of value to the overall post.
    here are my thoughts, if you know your target very well (email clients they use, demographics..all that great stuff) then this is a sure winner, else you need to trade off between consistency and flexible look and take a call. I would say use the web fonts only to the design elements which can vary but not branding elements that cannot be compromised – you have images for that.

  • http://aultec.com Joseph

    So this is good for mobile and Mac users and that’s pretty much it. Most email clients completely ignore the <head> content which is why we use inline styling only.

    Safe to forget about this article.

  • http://twitter.com/abimaelmartell abimael martell

    use images….

  • http://www.itsricky.com Ricky Synnot

    Well, thats not a lot of coverage guys – do you think that the inclusion of these typefaces for some users (mainly mac users) would enhance the product overall? Or degrade the product (email newsletter) overall becuase there are different experiences going on?

    Typically in the past as web developers we’ve chosen ‘web safe fonts that work’ to ensure a consistent experience, but is this a good thing?

    In your opinion, is it a good end result to have the same base newsletter, and trick it up for devices that can run the special code? Is that better?

    Love to hear your thoughts!

  • http://simantel.com Jonathan

    Utilizing a tool like http://litmus.com/email-analytics You can segment your list based on what email client your customers use. Send a custom font version to those that can support it and then either an image based, or “web safe fonts” version to those that can’t. This tailored experience can drive engagement.

  • http://www.aboytes.net Marco Aboytes

    I like the Idea a lot, I like the idea to give your content as much attractiveness as possible and keeping text, instead of images.

    And still, I can use several font families in my styles, enhancing the mails with supported clients, and also make mails viewable by unsupported clients. Just the way I insert background colors for mail clients that block images.

  • http://declaire.com Matt

    I suppose you could use @import to grab a file from your own server improve open rate tracking.

  • Marcus Taylor

    Have you got examples of usages of this technique out in the wild?

  • http://rickhocutt.com Rick Hocutt

    I believe that support for background images is also fairly poor so If you opt to use text vs. an image it would have to be against a plain colored background. If you have imagery, textures etc in your background you will still have to resort to using images. I’m with most of the others in that support is low and it’s pretty rare that our HTML email backgrounds are plain solid colors so it seems it may still be a while until we can code email the way we do web pages :(

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi Finge, you’ll have to manually edit the template to add the @import url(…). However, if you want to define the font by using or similar, you can do so in the editor, either by adding code directly to areas, or to the ‘source’ view of areas. Hope this helps!

  • http://www.wordpressguru.com.au/ Wordpress Developer

    I will give this a try. There is a fall back any way.

    The time will come when most of browsers and email client will start supporting it. Not sure about the Outlook though.

  • http://conversionlab.no Finge

    Can’t wait to try this out. Is there any way to do this using the templates from the template editor? Or would I first have to design the template, then download to add the code, then upload?

  • http://www.pixels-paper.nl Jelmer Borst

    So Android does support it, but GMail doesn’t? What the heck… nevertheless I think the overal support is quite crap; welcome to HTML e-mail.

  • http://promo.conversionlab.no Rolf Inge Holden

    Can’t wait to try this! As per your usual awesomeness can I expect to see this implemented easily into your editor at some point? :-)

    Keep up the amazing work!

  • http://www.byandyparker.com Avangelist

    What’s the point?
    You’re making another http request which is going to be costly to time of loading the mail.

    It isn’t the fact that there are so few mail clients that will accept it, even fewer accept you sticking a style sheet in and not using inline styles full stop.

  • http://mrjustin.net Justin

    You mention Typekit, but their only two options for loading fonts are both SCRIPT tags (no @import support, apparently).

    A somewhat thorough search for Typekit in email design brought up nothing… So do you have a secret trick up your sleeve or was that an oversight?

    Guess I’m off to Google Web Fonts for now!

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hey there Marcus, our most recent newsletter used this technique and we’ve already seen customer campaigns that have used web fonts. I’d be keen to showcase one in our gallery at a later date, so stay tuned and hopefully we’ll have a great example for you shortly.

  • http://www.studiohert.be Bart

    How would this work out with Webtype.org fonts, which are bound to a certain domain name?

  • http://beta.com Martin

    The fallback doesn’t seem to work in outlook 2007, just defaults to times new roman. If I remove the web font, then the fallback works.

    Any ideas?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Bart, unfortunately the technique used by Webtype.com likely won’t work, as we can’t guarantee which domain will be used to request the font. For now, Google Fonts is the only service which we know works off the bat, but keen to hear if other services make it possible to embed fonts sans JS :)

  • http://www.newleafinteractive.com New Leaf Interactive

    Just a note to everyone who is looking at their total percentage of open rates per client and poo-pooing the technique… Be sure not to confuse the importance of *opens* with the importance of *clickthroughs*.

    Let’s say you email 100 people, and 60 of them open on a non-webfont client, and 10 click through to your site.

    But then the remaining 40 people open on a webfont friendly client, and 30 click through to your site.

    Suddenly that smaller audience becomes more important than the larger one.

    And with mobile opens at around 20-30% and climbing, it’s going to be increasingly silly to ignore giving the mobile audience a customized experience. Just sayin.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    That’s a good question Bart. The only way to know for sure would be to experiment with Webtype.com, as we really can’t guarantee that their per-domain setup will play nicely with us. Alternately, it may be worth getting in touch with their team, in case this is something they have experience with.

  • http://www.studiohert.be Bart

    @Ros, does it make a difference when I have set up a custom domain for sending emails through CM?

  • http://bigger.fi Jemiina

    I’m using Open Sans through Google with @import and I’m having the same problem with Outlook 2007 & 2010 defaulting to Times New Roman on editable multiline sections. Surrounding singleline elements with old school font tags helped to get the fallback (arial, sans-serif) working for those, but even with font tags being inside the multiline sections does not give a consistent fallback to Arial on Outlook. Could it be because of the apostrophes surrounding ‘Open Sans’ in the font declarations that messes up Outlook, even with the overkill of declaring fonts in the head style, inline style & font tags?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    @Martin and @Jemiina – This is really interesting, a similar font issue was being discussed on our forums. I recommend you swing by and see what’s been said so far. Naturally, we’d like to get to the bottom of why this is happening for some people and not others.

  • http://www.riverside-design.co.uk Keith

    Hi, I’ve used similar code as above but can’t get it to work in any email client. Please email me for private link, thanks

  • http://www.tangeroutlet.com Robert Ralph

    Just as an FYI, Gmail actually does support Web fonts in a very very restrictive capacity. If you are able to include your fonts from the same sending server as your email then they will actually display.

    For example, if you were able to host these files on the same web server that the emails originate from… say ‘myhost.com’ and in the include statement the .woff file is also on myhost.com the font will indeed show up.

    Me and a fellow programmer have successfully shown that it’s an issue where Gmail’s new

    stylings will remove any includes that dont originate from the same server as a security feature.

    My fellow programmer also demonstrated that it’s best to not just rely on .woff, but also vector type includes. These are above my knowledge, but in short you’d have an include statement that looks like:

    @font-face{font-family:Futura-Bold;src:url(‘Futura/futura-bold-webfont.eot’);src:url(‘Futura/futura-bold-webfont.eot?#iefix’) format(’embedded-opentype’),url(‘Futura/futura-bold-webfont.woff’) format(‘woff’),url(‘Futura/futura-bold-webfont.ttf’) format(‘truetype’),url(‘Futura/futura-bold-webfont.svg#futurabold’) format(‘svg’);font-weight:normal;font-style:normal;}

    Admittedly this is hefty, but gets the most coverage. Seemingly only two places will consistently break down – Lotus notes (the devil), and Gmail on Firefox web browser.

    It’s unclear if multiple calls of this manner fault previous calls as our testing would occasionally fruit inconsistent results.

  • http://www.tangeroutlet.com Robert Ralph

    Well that was unintended. I put a ‘div’ statement as an example it broke out of the container. May want to resolve that :-/

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Keith – Your best bet is to get in touch with our team, we’ll happily take a look for you.

    Robert – Now, that is very interesting! So effectively, we’d have to host the images to get this to work. Hm, one to think about.

    Sorry about the code breakage in the blog, we’re looking into what we can do about that. Very glad you brought it to our attention, though!

  • http://actionrocket.co Elliot

    Hey guys

    just a quick note on the Outlook 2000 ‘support’ – this is technically possible but unlikely. Outlook 2000 uses whichever version of IE you have at the point you install it, so if you did go and install Outlook 2000 now, having IE 10 on your machine, then yes, web fonts would be supported. However it’s more likely that many of the Outlook 2000 users (if there are still any out there) would be using IE 5 or 6.

  • http://www.schawelcoles.com Mike

    Wait, so Google has their own list of fonts that Gmail won’t support?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Elliot – thank you for these notes, that’s awesome to know :)

    Mike – As always with Gmail, there are technical caveats :) Watch this space, as we’d love to see if the recent Gmail update results in any changes on this front.

  • http://ekrivoruchko.com Eugene Krivoruchko

    I am trying to do what Robert suggests by including my .eot and .woff into the archive with additional files to my template in Campaign Monitor so that they are stored on the same server from which email was sent.

    That doesn’t seem to work though, fonts on the template won’t load at all from local urls. Any ideas?

  • http://www.mathewporter.co.uk Mathew Porter

    Im giving this a test on my campaign that im sending this week to see what upport it has as font-face has had support in browsers since ie6, so interesting to see what clients support is like.

  • PKHunter

    Will this work with Outlook 2007? No one I know uses “Outlook 2000” anymore, not even archaic corporate organizations.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Eugene – Sorry for the late response, at present, you can’t import your font files into Campaign Monitor, I’m sorry to say. For copyright reasons, it’s not likely that we’re going to introduce this, either. Your best bet at present is to host the fonts on your own server, then link to them from there. You may want to see how Panic implemented this recently.

    Mathew – We actually did some testing recently on this and will be publishing our results shortly. Stay tuned to this blog :) In the interim, let us know if there’s a particular client you’d like advice on.

    PKHunter – Web fonts won’t work in Outlook 2007, I’m sorry to say. This post was written in late 2012 and as mentioned to Mathew, we’ve updated our results since then. Stay tuned and we’ll be sure to give you a full wrap-up of email client support for web fonts shortly :)

  • http://www.alkyos.net BenM

    A remark which does not directly concern fonts rendering: you said “they’ll display regardless of whether images are turned off in the inbox”. The web font or the default font ? Because if the webfont is displayed even if images are turned off, it would allow to track opening on Android, Thunderbird and Outlook 2000 by adding a dummy font (like the 1-pixel gif).

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi BenM, that’s a clever idea. We’ve also had silent sound files recommended for better tracking, so those are two approaches we’ll keep in mind, should we update how we record opens. Thank you so much for the suggestion – we’ll be sure to keep you posted if this is something we look into :)

  • http://www.test.com Karl

    No one has asked it, and I might be being stupid, but can I not added the custom CSS for changing the font in the Drag and Drop section of Mailchimp?!

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi Karl, we’re not quite sure how it works in the Mailchimp editor, but from our knowledge, adding web fonts to email using @import (unlike system fonts, eg. Verdana, Arial) generally requires some manual work. Have you seen otherwise elsewhere?

  • http://uba-solutions.com Roshan Shrestha

    Hi Robet Ralph,

    followed your instruction and included following in message but still no luck

    Any suggestions.


    <title>Birthday Reminders for August</title>
    src:url(“./Fonts/618eefb2-5ccd-4536-9580-c1857eb655e5.eot?#iefix”) format(“eot”),url(“./Fonts/bd900c61-f525-4cc3-a01b-a05deba32714.woff”) format(“woff”),url(“./Fonts/3007df0b-f523-4c7f-ac67-672aca81c026.ttf”) format(“truetype”),url(“./Fonts/dd11cb21-d1bb-4814-a04e-df6e328fd582.svg#dd11cb21-d1bb-4814-a04e-df6e328fd582”) format(“svg”);


    Here are the birthdays upcoming in August!

    Person Day Month Year
    Joe 3rd August 1970
    Sally 17th August 1973


  • http://uba-solutions.com Roshan Shrestha

    Opps my html renderred.

    Actually tried with adding style in the body as well as head of the html message

    src:url(“./Fonts/618eefb2-5ccd-4536-9580-c1857eb655e5.eot?#iefix”) format(“eot”),url(“./Fonts/bd900c61-f525-4cc3-a01b-a05deba32714.woff”) format(“woff”),url(“./Fonts/3007df0b-f523-4c7f-ac67-672aca81c026.ttf”) format(“truetype”),url(“./Fonts/dd11cb21-d1bb-4814-a04e-df6e328fd582.svg#dd11cb21-d1bb-4814-a04e-df6e328fd582”) format(“svg”);

    Here are the birthdays upcoming in August!

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi there Roshan, could you kindly post code samples in our forums? We’re happy to take a look at what might be happening there. Thanks for your input! :D

  • http://eddiepotros.com e11world

    It’s very annoying that WEB MAIL clients such as Yahoo, outlook.com and Gmail which run on browsers that support many new font embedding methods such as Google Fonts and Typekit don’t provide support for it. It’s actually stupid. They run on the browser, why are there limitation of what font it uses if browsers can support it all?

    I can understand Outlook but outlook.com? A fairly new update to hotmail should have it working and Gmail which is by Google should also have it working. Helloooooo, you have Google fonts. Come on Google. Get with it. Supporting Android but not Gmail is stupid.

  • http://br.linkedin.com/in/paolarguti/ Paola Gutierrez

    Hey! is it possible to set a different font-size for different families? So when the client doesn’t support the @import CSS at-rule I can adjust the font fallback size?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi Paola, at this stage, it’s only possible to adjust font-size (amongst other attributes) using JavaScript at this stage… Which isn’t supported in email :( Our Guide to Web Fonts has a great section on choosing fallbacks based on their x-height, so that may be useful to you :)

  • Taylor

    Just a note, another email marketing company Stamplia copied this blog post nearly word for word to their blog page (see from the title “Web Font Email Experimentation” down).


    Come on aren’t they still teaching kids not to plagiarize these days?

  • Kimberly Powell

    Hey Taylor, thanks for pointing that out! We’ll take it as a compliment! :)

  • http://google.com Marco Trappiste

    Really like the newsletter design at this address: http://campmon.createsend.com/t/ViewEmailArchive/y/3D3CF3D24A529303/C67FD2F38AC4859C/

    As long as you use decent fallback fonts, I believe it’s worth it, more and more email clients are able to display those fonts.

    Kind regards,

  • http://twitter.com/cblemuel Lemuel

    did anyone find this – causing spam filtering issues? with a <link or @import?

  • Chris Bowler

    Hi Lemuel,

    This should not give you any issues with spam filters. You may have problems if you’re using a non-secure URL (http rather than https), so if you’re hosting your own font files, that could be the issue :)

  • Anthony

    Hi there, this is a great article. A follow-up would be great as I’d love to know which major web font providers provides support for @import or linking.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi there Anthony, you may want to check out our Guide to Web Fonts, as there are a few tried-and-tested web font providers listed there.

  • http://loftee.co.uk Andrew Collins


    I’m having trouble with importing fonts and the fall back font in outlook.

    Outlook will register the font fall back I am using, but when I click download images it ignores the font fall back and uses Times New Roman (ew!)

    If however I use web safe fonts it doesn’t do this. This happens in complex emails and a test one I made using text only.

    Has anyone come across this before?


  • Chris Bowler

    Hi Andrew,

    There are definitely issues with Outlook and fallbacks for sans-serifs can be tricky. We’ve used “HelveticaNeue, sans-serif;” to ensure Times was not used. You should be able to use that as a fallback stack for web fonts that you’re importing.

    If you have further questions, please get in touch with our support team: http://help.campaignmonitor.com/support

  • Joran den Houting

    @Roshan Shrestha You need to include your fonts with the url before instead of using ./

    Otherwise it’s going to look for the font locally on the receivers computer.. The mail is hosted within the mail client and not on your server.

  • none

    I would like to have the traditional <link> way to add fonts.

    I know it is less supported than the @import method, but I’d like to see that for a fall-back in case the client support this method and no the @import method.

    The best would be to see the support with the three methods comboned (<link rel=…>; @import; and @font-face).

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi there none, that’s a great idea – for the time being, I don;t think there’s any harm in using all 3 methods and seeing how you go. Great reminder that we should run some more tests on this in the future!

  • http://www.wpguru.com.au/ Robin

    Any updates on this topic.
    This article seems to be written couple of years back.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi there Robin, I highly recommend you take a look at our Guide to Webfonts in Email. We keep our list of webfont providers and results up to date there.

  • https://storify.com/flawlessra353/an-updated-examination-of-secrets-in-floo Website
  • http://theitoons.com TheIToons

    Liked the idea of using http://litmus.com/email-analytics to send suitable email type to customers. *thumbs up*

  • http://psychkey.com Zhirou

    I was looking at my mail the other day (Outlook Online), and found this email from Bluehost:
    As you can see, they have used the Montserrat, a Google Font that is also available on lots of other font libraries. I later opened this mail in Apple Mail, forwarded it to Gmail—they all worked.
    I assumed that they didn’t use any code and simply put “Montserrat” in the code of the email, and because I do have it installed in my computer, I was able to see it. That wasn’t the case, because I opened it on my iPhone using the native Apple Mail client and it worked there, too.
    Any explanations?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    HI Zhirou, that’s very interesting! Montserrat isn’t a default iOS font, so either the font was imported, or a fallback was used. Perhaps you could post the email code in our forums? It would be well worth a look. Thanks, Zhirou – I hope we solve this one!

  • http://www.tripleknight.net Mark

    Just wondering what are the legalities surrounding using web fonts within email, I understand with commercial fonts you need to be licensed for their specific use, i.e. Web, App, Desktop so which one if any relate to email?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Hi there Mark, I haven’t seen that many examples of email-specific licenses from commercial vendors, so your best bet is to ask, prior to purchase. This is why the open-source licenses that Google Fonts are under are very convenient, as they don’t place restrictions on usage like many vendors and foundries do.

  • http://www.lockedowndesign.com/ Lockedown Design

    Thanks for this post. I needed to know the level of support for different email clients. Still a ways to go for @font-face and solutions like Typekit when it comes to email.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free