2

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!

  • Welcome to SF.SE shadow. Please take the time to visit Help center and take our Tour to better understand how this forum works, particularly how to use the editor. I've changed the formatting of your code from a "block quote" to "pre-formatted text" which is how we post code here. You can edit your post at any time to update it by clicking on the edit button at the bottom left. We want your experience here to be a positive one where you'll be able to receive the answers you need and contribute to the community if you choose to. Thank you. – crmprogdev Jan 23 '15 at 14:17
  • Yes I didn't remember about it (I'm a user of stackoverflow). Thanks for your help! – shadow Jan 23 '15 at 14:25
1

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.

  • Hi crmprogdev, I already tried what you suggested, with no luck. What I truly can't stand is that I correctly see the font in the preview window, but I visualize the Arial one when I receive it in one of my email accounts. Thanks for your support. – shadow Jan 23 '15 at 15:29
  • You've event tried the Font Squirrel approach? That seemed to have resolved problem for the poster in the SF Developer Forum. The issue may be one of Gill Sans not being a very commonly used font. Its one I personally like and have used for my own letterhead in the past. I've not seen it as an OTF, only as a Postscript but I also haven't looked since I've owned it for years. – crmprogdev Jan 23 '15 at 15:42
  • I tried the following but it's still not working: <html> <head> <link href='fonts.googleapis.com/css?family=Open+Sans:800italic' rel='stylesheet' type='text/css'> <style> body { letter-spacing: 4pt; word-spacing: 0.25em; } p { text-align: center; font-size: 24px; text-transform: uppercase; font-family: Open Sans; } </style> <title>Welcome</title> </head> (...) – shadow Jan 23 '15 at 15:51
  • Obviously it's not the font squirrel approach but is a close one. The problem is fontsquirrell refuses to convert Gill Sans (I tried to convert it even before posting here...) – shadow Jan 23 '15 at 16:03
  • I'm not surprised that Font Squirrel wouldn't convert it. It's not a "freebie" or "cheap" font, but instead a well crafted premium font from Monotype with light, demi-bold, bold, extra bold, condensed and other variants; all with excellent kerning. You won't be able to get it using the Google API. Its only available from Fonts com's Typecast Service. – crmprogdev Jan 23 '15 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.