Web safe fonts vs. web fonts

There are two types of fonts that can be used in email; Web safe fonts and web fonts.

Web safe fonts

Web safe fonts make up the below list and are found across the majority of computers, devices and operating systems.

When you use a web safe font as live text in email, it's almost guaranteed to work when your customers are viewing your email. For this reason, we recommend you stick to a web safe font.

• Arial
• Helvetia
• Times New Roman
• Verdana
• Courier/Courier New
• Tahoma
• Georgia
• Trebuchet MS
• Geneva

For brands, a web safe font will not always be inline with branding and in these cases a custom web font can be used.

Web fonts

Web fonts are fonts that are designed to be used on websites. Unlike standard system fonts, which are installed on a user's computer and can be used in word processors and other applications, web fonts are downloaded by the browser from the internet when a webpage loads. When someone accesses a website, web fonts are defined through CSS.

Web fonts embedded via CSS import can be used within your emails, however compatibility can differ across email clients - only around 30% of email clients support web fonts^*.

Here's a list of email clients that have full support for web fonts:

• Apple Mail
• iOS Mail
• Android Mail (not Gmail)
• Thunderbird
• Outlook for macOS

Some Outlook versions for Windows have partial support and Gmail doesn't support web fonts fully.

We recommend using web safe fonts as a fallback, although this fallback may not be used as some email clients use their own default font as a fallback.

For example Gmail uses Arial as a default fallback, and older versions of Outlook (such as Outlook 2003) use Times New Roman as a default fallback font. So keep these in mind.

Gmail also supports Roboto and Google Sans since they use those web fonts itself.

^*Based on reported email client support from caniemail.com

Which web font type should I use?

There are a number of different file formats for web fonts including .eot, .svg, .ttf, .woff & .woff2.

For the best compatibilty across email clients, it's best to use either the .woff or .woff2 formats.

Using fonts in your email or web pages

To use a custom web font in a Taguchi activities, you'll need to supply the URL to where the web font is hosted. Due to licencing issues, we do not allow fonts to be hosted on our servers.

The two common ways to add a custom font is to:

1. Upload the web font to your domain, white list our domains and add the hosted URL to your theme. Make sure the hosted URL does not change, otherwise it will cause the web font to not render;
2. Some font providers, like Adobe Fonts, provide a way to embed the font using CSS embed. You just need to add the provided link to your theme;

Once you have the URL from one of the above two methods, you will need to go to your chosen theme via Settings > Themes to add a custom font to your activites.

1. Select your chosen theme;
2. Expand the 'Fonts' section;
3. Under 'Custom Font Stack', click 'Add Custom Font';
4. Add the custom font URL.

For more information, see our documentation on fonts and theme set up here.

Whitelisting domains

To ensure that web fonts work on your activities when hosting them under your domain, you will need to set access-control-allow-origin header to whitelist our domains. The URLs to filter are:

• *.taguchi.com.au
• *.taguchimail.com
• *.mail-cdn.com

A developer or someone in your IT team will need to set this up for you.

Google Fonts

If your font is a Google font, you will need to host it under your domain. If you use a custom click tracking domain, we can upload the webfont to our CDN. Please contact Taguchi Support for further assistance.

Adobe Fonts

If your font is an Adobe font, you will need to have an Adobe licence and input the generated typekit URL into your themes custom font section.

Adobe typekit URLs are usually in the format:

https://use.typekit.net/abcd123.css

Ensure that you have whitelisted Taguchi domains. Due to licensing restrictions, we cannot host Adobe fonts for you.

Other Font Libraries

If your font is from any other font library:

• We cannot host fonts from other licensed font libraries on our CDN due to licensing and you will need to:
  • Host the web font on your domain and add the hosted fonts URL into your themes custom font section
  • our domains must be whitelisted on your end in order to get access to the fonts.
• Some libraries provide a similar embedded CSS / URL method like Adobe Fonts. Just add generated URL into your themes custom font section.
• If the font license covers use in email templates, web, and allows for fonts to be hosted and you have a custom click tracking domain, then we may be able to host the fonts under this domain for you and then provide you with the links to input into the custom font URL field. Please contact Taguchi Support for further assistance.

---