• dilboy

    Good stuff. Have you tried with other google web fonts?

    • http://www.elliot-ross.co.uk/ Elliot Ross

      yep – the iphone screenshot is using some of the other ones, they work too, but they drop out in Android. Technically Android doesn’t seem to support webfonts, but it does have Open Sans as that’s a native font

  • Jody Gibbons

    Interesting article. This is something I’ve just started experimenting with also. Forgive my naivity but can you host other fonts on Google if what your after isn’t on Google Fonts?

    • http://www.elliot-ross.co.uk/ Elliot Ross

      hey Jody – yep, I just used Google fonts as it’s easier, but you could upload the font files to your server and call them from there (as long as you have the font licenses to do so)

      • Jody Gibbons

        Great good to know, cheers for that Elliot

  • moonstrips

    Wrapping it in a media query is genius! I was getting around that issue by using the font tag. I shall give this a try. Thanks!

  • Pingback: More on using webfonts in HTML email()

  • Luella

    Very cool. Nice one.

  • Pingback: Mid-Week Email Design Inspiration: Typecast()

  • Graeme

    It only seems to work in AOL Mail on Chrome. Not having any luck with Firefox anyway

    • Elvis Adomnica

      Firefox doesn’t allow you to load cross domain fonts. That is, if your fonts are hosted on example.com and the AOL mail domain is aol.com firefox won’t load the fonts.

  • Gary Emmette Chandler

    Spent my day going a little bonkers trying to figure out exactly why Outlook 2007/10 would default to Times New Roman no matter what I did in a newsletter I was working on, when all the other email clients were defaulting to the specified backup font properly. Thanks to this post, I was able to confirm it was a conflict with Google Fonts, and fix the issue to boot.

    Thank you for posting this. You are awesome. I hope the Google Gods bless this blog in return.

  • remi_grumeau

    I’m a bit confused. Isn’t linking content to an external domain name a source of spam alert?!

    Some email clients are also not loading a content if it’s url is not included in the DOM. Since this webfont is only included in the head part of the html code, it won’t be loaded on CSS compatible clients (BB10 comes first in mind, but afair there is a few others).

    Isn’t the best way to do so would be to integrate the font as base64?

  • Vicentebelmonte

    Very Interesting! Thanks for sharing!

  • Becs Rivett

    Hi Elliot, just wanted to follow up on this. I have successfully been able to view a non-native Android web font in Android mail. Also I really could not get the screen media query to work with aforementioned font in Outlook. It works fine when I used your code and degraded gracefully but not with the font I used.

    • http://www.actionrocket.co Elliot Ross

      ah interesting! gonna do more work on this, we’ve been playing around with @import too, which seems to get around the outlook bug

  • Pingback: How we made the #emailweekly newsletter | Email Design Review()

  • Doug

    Just found this article and the fix works perfectly. Thank You for sharing this!

  • Gustavo Cohen

    Hi Everyone! I know I am joining the conversation a bit late, but I am new at this. Even after using the media query to wrap the font import I still have outlook 2007 replacing the font to ‘times’. I went further and wrapped the media query inside a conditional for ‘non-outlook’

    @media screen {
    .h1, .h2, .h3, .h4, span, a, li {
    font-family: ‘Open Sans’, arial, helvetica, sans-serif;
    }
    }

    <!–

    And outlook keeps defaulting to ‘times’. the Curious thing about this?? I open my winbox machine, open outlook 2007 and the preview shows the email sent with a ‘sans-serif’ font, the moment I choose to download pictures, the font changes to ‘times’

    the only thing that worked was Nicole’s technique of using a styled tag.

    Any suggestions?

    • http://somethinginteractive.com/ Michael J Kormendy

      They meant to wrap the @font-face {…} declarations in @media screen { }

  • Glenn Cho

    Just curious. Personally, did you feel that utilizing a custom font added to the impact of the email to the user? What do you think the benefit was relative to the cost of implementation? Is there brand value in using a custom font vs. default type?

  • Matt Sims

    Genius! Thank you, I’d been battling this issue all morning!

  • Harman

    NICE