[SalesForce] Can’t add a font to a custom email template

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.

Related Topic