how to use different fonts in email template

how to use different fonts in email template

  

hi i created a email template with new theme. i upload all fonts on this theme but unable to see that font on email template.

also include this fonts on css page.


Please give me some solution. it takes default font arial.

Hi Bharat,

We'll need a bit more context here... what do you mean "upload all fonts on this theme"?... also, what CSS did you use to include those fonts on emails (can you show samples?)

Finally... where does it default to Arial? on Service Studio while designing your email template? on an email client when you send the email? in this case, which client(s)? 

Thanks for reply..

In applications resource i import the fonts which i want. and make it target directory to deploy to target directory.

from here i use this font in my css page like below.

SyntaxEditor Code Snippet

@font-face {
    font-family: helvetica-normal;
    src: url('/RatingsPro/helvetica-normal.eot');
    src: url('/RatingsPro/helvetica-normal.eot?#iefix') format('embedded-opentype'),
         url('/RatingsPro/helvetica-normal.woff') format('woff'),
         url('/RatingsPro/helvetica-normal.ttf') format('truetype'),
         url('/RatingsPro/helvetica-normal.svg#robotoregular') format('svg');
    fnt-weight: 400;
    font-style: normal;
}

and after that i used this font to my table but it takes default font arial instead of hevetica .

and while designing i used font-family: helvetica-normal; in table inline css.


Hi Bharat,

@font-face is only working with some email client like Apple's Mail.app and the Mail app on iOS.

Did you check on these two?


Regards

Pankaj Pant

Hi Bharat,

I'm pretty sure you'll have to provide full URLs in CSS for emails, as the email client will have no idea where to find those resources unless it has the absolute URL.

for example, instead of:

'/RatingsPro/helvetica-normal.eot'

you can try and give it the full URL to your font resource:

'http://your.environment.hostname/RatingsPro/helvetica-normal.eot'

Or maybe you can reference directly the resource from the original provider (for instance if it's a Google Font you could use their URL for the font resources, instead of your own server's.

Thanks. I tried this 

'http://your.environment.hostname/RatingsPro/helvetica-normal.eot'

but not working.  i want to use 

SyntaxEditor Code Snippet

font-family: helvetica-normal;

this font. but not working for me.

in url i put my environment.host name.

and helvetica normal is  not available in google font. it is paid. 

thank you. 

Hi Bharat,

The main thing to realize here is that not all (not even most) e-mail clients support loading external fonts. For some more info on this topic see e.g. here and here. Basically, the only way to go is using @font-face, and have in the URL the proper font location. This means a URL that can be accessed by anyone receiving the mail.

However, I noticed this in your previous post: "helvetica normal is  not available in google font. it is paid.". If the font is a paid font, it is very likely the license does not permit you to share the font (which is basically what you are doing), and you'll be liable for breaching copyright.

I will have to agree with Kilian here, it's not usually a good practice to use external fonts in e-mails, as support is still far from the support you have for it in browsers.

That being said, and from a technical perspective... I'd ask you to check what is the path to your font Resource on your module (on the Data tab, Resources folder, select your font and check the Runtime Path - or eventually the Target Directory, I can't really remember which right now). That is going to be the relative path to the resource on your server... and is possibly not just "/RatingsPro/helvetica-normal.eot".