SOLVED

How to add custom font to email templates?

Go to solution
emily001
Level 1

How to add custom font to email templates?

I have 2 custom fonts (Sailec and Recoleta) that I want to use in my Marketo emails. I have already uploaded the .woff2 and .woff files into a font folder in Design Studio. What are my next steps to start using these fonts in my emails? I would like Sailec and Recoleta to be my main fonts in that order but have Arial, and Georgia fonts as fall backs.

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: How to add custom font to email templates?


I'm not sure if there's something else I'm still missing but I input the below code in the <head> of my email like the Litmus link you provided suggested.
<link href="http://pages.newrez.com/rs/152-KAN-566/images/RecoletaW05-Regular.woff" rel="stylesheet" type="text/css" />

That's the URL of the binary WOFF file. If you use the <link> method it needs to point to a CSS stylesheet that in turn references the font file.

View solution in original post

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

Re: How to add custom font to email templates?

Hi,

 

You can follow Litmus's guide here: https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/

 

There's nothing particularly special about Marketo w/r/t webfonts: they don't work in all clients by a long shot, but you can add them to any template.

emily001
Level 1

Re: How to add custom font to email templates?

Got it. This link is really helpful. I do have one question though, if I uploaded my fonts into Marketo, am I able to use that URL provided in Design Studio in my email template code or is there another place I need to upload/host the files in, in order to embed with <link>, @import, or @font-face methods?

SanfordWhiteman
Level 10 - Community Moderator

Re: How to add custom font to email templates?


if I uploaded my fonts into Marketo, am I able to use that URL provided in Design Studio in my email template code or is there another place I need to upload/host the files in, in order to embed with <link>, @import, or @font-face methods?

Yes, just test-test-test.

emily001
Level 1

Re: How to add custom font to email templates?

I'm not sure if there's something else I'm still missing but I input the below code in the <head> of my email like the Litmus link you provided suggested.

 

<link href="http://pages.newrez.com/rs/152-KAN-566/images/RecoletaW05-Regular.woff" rel="stylesheet" type="text/css" />

 

And for the fallback font, it's currently set up as font-family: SailecW05, arial, georgia, helvetica, sans-serif; but I'm not seeing the font change in my emails. So I'm not sure if there's something else that I'm missing.

SanfordWhiteman
Level 10 - Community Moderator

Re: How to add custom font to email templates?


I'm not sure if there's something else I'm still missing but I input the below code in the <head> of my email like the Litmus link you provided suggested.
<link href="http://pages.newrez.com/rs/152-KAN-566/images/RecoletaW05-Regular.woff" rel="stylesheet" type="text/css" />

That's the URL of the binary WOFF file. If you use the <link> method it needs to point to a CSS stylesheet that in turn references the font file.

emily001
Level 1

Re: How to add custom font to email templates?

Got it. Thanks! I was trying to figure out what was missing. that solved the problem

Joe_Reitz
Level 10 - Champion Alumni

Re: How to add custom font to email templates?

To Sanford's point, make sure you incorporate a fallback font. For example, set styling to be something like:

 

font-family: Hind, Verdana, Arial, Helvetica, san-serif;

 

That way even if the recipient's clients don't support custom fonts, you'll still retain some control over how your emails will render.

If it doesn't look cool, you're probably doing it wrong.