Importing Web Safe Fonts into your Templates

Instead of being limited to using email safe fonts (i.e. the default ones in the platform), make your comms stand out in your recipients' inboxes with web safe fonts. It takes about ten minutes to do and will elevate your comms to the next level, making sure they're more on brand than ever.

Before you add your new font, make sure you have the appropriate licence to use the font online. If it's a Google Font, it's likely free for commercial use, but be sure to check beforehand. If it's hosted by another service, you'll probably require a commercial licence.

Are web safe fonts fully supported in email?

The short answer is no.

Please be aware that if a font is web safe, that does not necessarily mean it's email safe. The good news is that Apple Mail does fully support web safe fonts, which is what 30% of recipients in the legal and professional services space use to view their emails*. 

Support for Outlook (the most popular email client in our sector, accounting for 36% of email opens*) is more complicated. To guarantee that a web safe font renders in the Outlook desktop app, in needs to be installed locally. Web safe fonts are more widely supported on Outlook.com and Outlook Mobile (iOS and Android).

Support for web safe fonts extends to many of the less popular email clients too, and compatibility is always increasing! We estimate that approximately two-thirds of your recipients would benefit from the use of web safe fonts.

One-third who will not be able to render them is still a large proportion though, so don't forget about them! Be certain to include fallback fonts if you are going to start using a web safe one. You can find out more about this below.

*Statistics inferred from data extracted from our platform

Google Fonts are the easiest to use. Here's how:

1. Find your font at fonts.google.com
   
   
2. Select the style(s) you'd like to use and copy the <link> code. The code should look something like this: 

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">

   Here's what to do in Google Fonts:
   
   
   
3. Edit your template and paste the <link> tags into the second line of your HTML:
   
   
   
4. Save your template.

 

We're not quite done yet. Next, let's add your font to the platform so you can select it from the font drop-down in the campaign builder:

1. Navigate to the "Custom fonts" setting under "My Settings" in your Concep account
   
   
2. In Google Fonts, check the CSS rule for your font:
   
   
   
3. In this example, the CSS rule is as follows: 

   font-family: 'Rubik', sans-serif;

   This should be inputted into the "Custom fonts" setting like this: 

   Rubik/Rubik|sans-serif

   Please note: "Sans-serif" is an example of a fallback font. A fallback font is the font family that an email client will default to if the primary font (i.e. Rubik) cannot render. It's imperative you include fallback fonts in the "Custom fonts" setting because web safe fonts are not yet universally supported in email. If you do not include a fallback value, email clients will render all text as Times New Roman which will ruin the aesthetic of your comms.
   
   
4. Click "Add", and then "Update".
   
   

Now it's time to test that everything is working. Here's what to do:

1. Create a campaign using the template you added the <link> code to
   
   
2. Highlight some text, find your new font on the drop-down and make sure it changes:
   
   
   
3. Check that the fonts are outputting correctly in the HTML and that the fallback fonts are there:
   
   
   
4. Send tests to as many different environments as possible to make sure you're happy with the way your email renders. Alternatively, check using our Inbox Preview tool.

What if I'm not using a Google Font?

You'll likely be able to find it hosted with another web font service. Here's a few to check:

• Adobe Fonts
• My Fonts
• Font Library
• Font Squirrel
• Fonts.com 

If the service you use doesn't give you the option to copy the entire <link> code as Google does, the code you paste into your template should always follow this format:

<link href="[CSS host URL]" rel="stylesheet">

Once you've got the <link> code, you should follow the steps outlined in the Google Fonts walkthrough above to add your font to your templates.

Alternatively, if you cannot find your font with another web font service, you can host the CSS file yourself. The CSS should look something like this:

@font-face {
  font-family: 'font name';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://domain.com/fontname.woff2) format('woff2');
}

You'll need your font hosted in a publicly accessible location in either woff or woff2 format (the latter is preferable). The CSS file needs to be publicly accessible too.