font-face in apple mail & iphone

I'm trying to use font-face in an email (I know it will only work in apple mail & iphones) and have tried the way CM tried to in their blog post about it but I'm not seeing the desired font in the html email (though it looks good in my browser). I used a data URI of the WOFF version of the font. Should I try Open Type, EOT? Thanks!

roshodgekiss roshodgekiss, 2 years ago

Hi kickpleat, thanks for getting in touch about this yesterday on Twitter as well. As per my email (and for the benefit of other readers), we currently remove @font-face declarations on import of a campaign, so this method can't be used as yet, I'm sorry to say. However, we are considering their inclusion now and will keep you posted as we progress on this.

That said, it's recommended these days that you use all three formats, ala 'Fontspring syntax':

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Sadly, we've had no luck with Google Web Fonts in email either, but will keep you posted if more info comes to light. Have a good one!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
allanwhite, 2 years ago

Just wanted to add my support for allowing @font-face. Even though (per your earlier font UA test) only iOS and Mac Mail support it, 1.) it's a reasonable progressive enhancement and 2.) iOS + Mac OS is now a market of significant size.

I noticed that it seemed to be stripped out even when I using an externally linked CSS file. Is there any current workaround? @media?

Also, re: @kickpleat's question on formats: I really like FontSquirrel's web font generator, it kicks out all the proper formats (Google Fonts, I think, don't render on iOS in my tests; I download them and run them through the squirrel).

roshodgekiss roshodgekiss, 2 years ago

Hi allanwhite, welcome to the forums and thank you so much for giving this issue a nudge - I agree that it would be great to support @font-face, so I'll certainly see where we're up to and let you know if we add this to a future release.

At present I'm not aware of a workaround, but be sure to [url=http://www.campaignmonitor.com/blog]follow our blog[/blog], where we post updates on topics like this.

Thank you so much for sharing FontSquirrel's generator - that's excellent! I'll keep this in mind for the future :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account