Menu icon Foundation
@import web fonts

Now that 2.2.1 is out, I wanted to revisit the @font-face thread from a couple weeks back.

Post-update, it looks sass is correctly adding the font rules to app.css after panini runs. Just one problem; it looks like the email clients don't respect the import unless it's in the <style> block. I didn't run though EoA or litmus yet, but just sent myself the message and checked in Mail.app

Apparently, @import works better, but I tried a couple different approaches anyway:

  • app.scss @import _fonts.scss; (containing @font-face rules)
  • app.scss @import 'https://fonts.googleapis.com/css?family=Lato|Oswald';
  • app.scss @import _custom.scss (containing @import as well as other rules)
  • paste @import 'https://fonts.googleapis.com/css?family=Lato|Oswald'; into my index.html's body, as the first rule in my <style> block.

Only method Apple Mail respected was the last one. Any bright ideas on how to get the inliner to include that in the style block?

font-faceinlinerSasspanini

Now that 2.2.1 is out, I wanted to revisit the @font-face thread from a couple weeks back.

Post-update, it looks sass is correctly adding the font rules to app.css after panini runs. Just one problem; it looks like the email clients don't respect the import unless it's in the <style> block. I didn't run though EoA or litmus yet, but just sent myself the message and checked in Mail.app

Apparently, @import works better, but I tried a couple different approaches anyway:

  • app.scss @import _fonts.scss; (containing @font-face rules)
  • app.scss @import 'https://fonts.googleapis.com/css?family=Lato|Oswald';
  • app.scss @import _custom.scss (containing @import as well as other rules)
  • paste @import 'https://fonts.googleapis.com/css?family=Lato|Oswald'; into my index.html's body, as the first rule in my <style> block.

Only method Apple Mail respected was the last one. Any bright ideas on how to get the inliner to include that in the style block?

Rafi Benkual over 3 years ago

Looks like there is an open issue for @font-face. The inliner is not passing it over https://github.com/zurb/foundation-emails/issues/284

 

I thought only Apple respects custom fonts anyways right?

Jeremy Reynolds over 3 years ago

I'll take a look.

To my knowledge, Thunderbird, Outlook 2000, and Android's native client (pre-Lollipop) are supposed to have some form of support as well, according to https://www.campaignmonitor.com/blog/email-marketing/2012/12/using-web-fonts-in-email. Probably more importantly, the view-online and archive pages would respect it in folks' browsers.