Email typography - Can I use custom fonts? Follow

No doubt you are visiting this page in the hopes that you are able to use a custom font when creating your email. If so, I have some good news and some bad news for you.

The good news is that you CAN use custom fonts. The bad news is that you can only use it in custom HTML and Raw HTML emails, and the majority of email clients don’t support them.

Because custom fonts aren't always supported across email clients, we recommend using one of the following fonts when you are designing your emails. These are web safe fonts and are all available in the drag and drop message editor in the email marketing system:

  • Arial
  • Arial Black
  • Arial Narrow
  • Times New Roman
  • Trebuchet MS
  • Tahoma
  • Helvetica
  • Courier
  • Courier New
  • Comic Sans MS
  • Georgia
  • Verdana
  • Century Gothic
  • Impact

Why are web safe fonts important?

These fonts are available on the vast majority of computers and this means that if one of these fonts is used, it is almost assured that your contacts will also see the text in the specified font (these fonts may be further reduced depending on the operating system you are using). For example, if your email contained text set to use Verdana, then your contacts should also see this text in Verdana.

If a font which is not a Web Safe Font is used, then when contacts without this font view the email, it would revert to their system/email client default, which is typically Times New Roman. For example, if the Georgia font is used and the client doesn't have this font, they would likely see the text in Times New Roman.

Using custom fonts

If you still want to use a custom font (such as one from Google Fonts), you can do so by editing the code of your HTML or Raw HTML email. Please note that this won’t work in the drag and drop editor.

If you want to use the HTML approach, you can insert the <link> tag into the <head> section of your code. If I use the example of the Google Font ‘Open Sans Condensed’, my code would look like this:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

If you want to use the CSS version, your code would look like this:

<style=”text/css”>

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

</style>

Once you have done the above, you should then be able to use this font-face throughout the rest of the email as you would for any other font.

Because custom fonts aren’t supported across so many clients, it is a good idea to always use a fallback font or two when you are coding your email. For example:

<font face="Open Sans Condensed, Arial, Helvetica, sans-serif">

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request