Web Fonts

Problem

Previewing a Web Font in your template works, but it doesn’t always appear the same on the customer’s end.

How It Happens

This could happen because the customer doesn’t have this font downloaded on their computer or the Web Font didn’t load properly. Also note that not all Email Clients support Webfonts.

Solution

The solution to this is to use a Web-Safe Font as a default that works well with the design of your template.

Web-Safe fonts are common fonts that are pre-installed on most operating systems.

Some examples include but are not limited to: Arial, Calibri, Georgia, Impact, Tahoma, and Times New Roman.

Having a Web-Safe font maintains the integrity of your design and eliminates the worry of not knowing what will appear in front of your customer.

Web Font Bolding

Problem

If you want to include webfonts into your email, you will have to use the @import CSS rule. In Sendwithus, font weights have to be imported separately or you will be prompted by an error.

Web Font Bold Error

Solution

<!-- Incorrect -->
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

<!-- Correct -->
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:700);