Menu icon Foundation
Custom Fonts - Foundation Emails

I'm looking to add a custom fonts to my emails written in Foundation. Any cues on how I can achieve the same?

 

Importing the file into the CSS file doesn't work. 

 

 

emailsfonts

I'm looking to add a custom fonts to my emails written in Foundation. Any cues on how I can achieve the same?

 

Importing the file into the CSS file doesn't work. 

 

 

Oliver Nicholson 3 months ago

I achieved this by adding an `@import` of the font to the top of `app.scss` - note that the font import must come before `@import 'settings';`.

 

e.g.:

@import url('https://fonts.googleapis.com/css?family=Montserrat:300');

@import 'settings';
@import 'foundation-emails';

 

then add your font to L61 of the default `_settings.scss` file:

// 4. Typography
// -------------

$global-font-color: $BL-black;
$body-font-family: "Montserrat", Helvetica, Arial, sans-serif;
$global-font-weight: normal;
$header-color: inherit;

 

Done :-)

Sumit Jindal 3 months ago

As far as I know, custom fonts in email also depends on the email service provider. Gmail does not support custom fonts, so nothing will work in gmail even when your code is fine. I have tested yahoo, and yahoo mail does support custom fonts.

Thanks,

Sumit