CODEWITHSUNDEEP
htmlnewsletter
Pratik Bhatt
Pratik Bhatt

Reputation: 488

how to add the font family in custom email newsletter?

I am trying to make a custom email newsletter however in gmail I am not able to render the fonts that I want to render.So kindly let me know which code snippet shall I use for the same.

Upvotes: 1

Views: 1655

Answers (1)

JGreatorex
JGreatorex

Reputation: 425

You can use any web fonts in email. Just be weary that they aren't supported very well.

That being said - some clients do support them!

To import fonts from a web font provider, you would add it in between your <style> tags like any other site.

Example (using google fonts Open sans):

<style>
...
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
...
</style>

And then when you use it in your email:

<td valign="top" align="center" style="font-family: Open sans, Arial, Helvetica, sans-serif; font-size...">
   <span class="fallback_font">Your content here</span>
</td>

Now you may have noticed there is a span surrounding the content with the class fallback_font. This is for all the pesky outlooks (not 2002/3) which don't support web fonts. They require you to add a special class for them to have their own fallback. So again in the head place this block of code:

<!--[if mso]>
     <style type=”text/css”>
        .fallback_font {font-family: Arial, sans-serif;}
     </style>
<![endif]-->

This creates a conditional CSS rule which only microsoft outlooks will follow. This will force all outlooks to fallback to an Arial and/or sans-serif font. You will need to place this aroud EVERY instance where a webfont is used.

Hope this helps - any question feel free to ask :)

Upvotes: 1

Related Questions