I've been trying for a while to add a custom font to a custom email template. The issue is the following:
on the preview screen, the text font is correct and I see the email as it should be;
whenever I send the email to any address, the font doesn't get loaded and the font I see is Arial.
I tried to:
- use different providers (gmail, outlook webmail, outlook desktop client)
- bind the font directly to the email template in base 64
- link the font via a static resource (instead of linking it using a public document)
- using slightly different approaches (single quote, double quotes, and so on)
- put the ttf on a different host (which doesn't have any restrictions due to .htaccess)
As far as I know, the solution I'm trying to implement should not work for all the browsers, but since I didn't manage to get it work so far for Chrome, I'm not focusing on this problem right now.
Here's a snippet of the html + css code:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'GillSans';
src: url('https://c.cs20.content.force.com/servlet/servlet.FileDownload?file=015m0000000DhgX') format('truetype') ;
}
body {
letter-spacing: 4pt;
word-spacing: 0.25em;
}
p {
text-align: center;
font-size: 24px;
text-transform: uppercase;
font-family: GillSans;
}
</style>
<title>WELCOME</title>
</head>
<body>
<p>
SOME TEXT GOES HERE
</p>
</body>
</html>
Thanks for your help!
Best Answer
I notice a difference in the way you've specified Gil Sans in single quotes in your @ statement vs no quotes in your
<p>
style definition. Since you seem to want the entire document to be Gill Sans, specifying it again in the<p>
style definition seems superfluous. The difference in not using quotes in the family name may be the source of your problem.That having been said, here's a good reference on CSS for downloadable web fonts CSS Fonts Module 3 that contains examples. You'll probably also find this link to Font Squirrel helpful as well. Both came from this SF Developer Forum post Implement Custom Font | CSS | Static Resource which may be of interest to you as well.