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.
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);