Re: Can I use Google fonts in emails?

Anonymous · ‎03-08-2016

Is it possible to embed Google fonts in email templates? I've been successful using them in landing page templates, but I can't find any documentation related to email templates.

Justin_Cooperm2 · ‎03-08-2016

Don't use <link> or @import (these do the same thing by the way), you should include the CSS in the actual email. You also want to inline as much of the CSS as possible in emails. Specify font-family of HTML elements using inline styles and also make sure to define with fallbacks.

In the <head>, you can add something like (instead of <link>):

<style>

@font-face {

font-family: 'Raleway';

font-style: normal;

font-weight: 400;

src: local('Raleway'), url(https://fonts.gstatic.com/s/raleway/v9/UAnF6lSK1JNc1tqTiG8pNALUuEpTyoUstqEm5AMlJo4.ttf) format('truetype');

mso-font-alt: 'Arial';

}

@font-face {

font-family: 'Raleway';

font-style: normal;

font-weight: 700;

src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v9/JbtMzqLaYbbbCL9X6EvaI8DdSZkkecOE1hvV7ZHvhyU.ttf) format('truetype');

mso-font-alt: 'Arial';

}

</style>

Then, just use the font by attaching the style attribute on the HTML elements (with fallbacks).

View solution in original post

Anonymous · ‎03-08-2016

In Marketo Emails? If so, check this out:

Change the Form Font Family - Marketo Docs - Product Docs

Anonymous · ‎03-08-2016

Hi Scott,

Thanks for the fast response. Unfortunately, that doc refers to changing the font for a form on a landing page. I've been able embed Google and Typekit fonts on landing pages and forms, but not in email templates.

I know I can't use Typekit fonts in email because of the javascript involved, but I've successfully used Google fonts in email templates in other marketing campaign software using these methods:

1. Link the font stylesheet in the <head> of the template:

2. Use a media query font definition for Outlook override in the embedded styles:

@media screen { [style*="Montserrat"] { font-family: 'Montserrat', Arial, sans-serif !important } }

3. Use an import url statement in the embedded styles:

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

4. Define the style inline:

I'm testing in Litmus, and none of these methods are showing the correct font.

I was hoping someone knew of a magic method or setting in Admin that would work for email templates.

Thanks!

Grégoire_Miche2 · ‎03-08-2016

Hi Sergey,

Before using fancy fonts in email, consider that many email clients will not render them and fall back to default fonts. so the emails will in fact look quite differently from what you have designed, and this might be counter-productive. Of course, this point has to be mitigated with some considerations about your target market. individuals are likely to be less affected, but if you sell to B2B, keep in mind this rule of thumb, straight our of my consulting experiences:

The largest the company, the oldest the messaging system and the less likely it is that google fonts will render correctly...

And of course, there are some exceptions

-Greg

Justin_Cooperm2 · ‎03-08-2016

Don't use <link> or @import (these do the same thing by the way), you should include the CSS in the actual email. You also want to inline as much of the CSS as possible in emails. Specify font-family of HTML elements using inline styles and also make sure to define with fallbacks.

In the <head>, you can add something like (instead of <link>):

<style>

@font-face {

font-family: 'Raleway';

font-style: normal;

font-weight: 400;

src: local('Raleway'), url(https://fonts.gstatic.com/s/raleway/v9/UAnF6lSK1JNc1tqTiG8pNALUuEpTyoUstqEm5AMlJo4.ttf) format('truetype');

mso-font-alt: 'Arial';

}

@font-face {

font-family: 'Raleway';

font-style: normal;

font-weight: 700;

src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v9/JbtMzqLaYbbbCL9X6EvaI8DdSZkkecOE1hvV7ZHvhyU.ttf) format('truetype');

mso-font-alt: 'Arial';

}

</style>

Then, just use the font by attaching the style attribute on the HTML elements (with fallbacks).

Anonymous · ‎03-09-2016

Thanks Justin! This works for iOS and at least renders the fallback font in Outlook. Much better!

Justin_Cooperm2 · ‎03-09-2016

Yeah, it will never work on all clients. Check out this article for more info: https://www.campaignmonitor.com/dev-resources/will-it-work/webfonts/

Roy_Hegger1 · ‎11-01-2017

Hi Justin -

Thank you, this was very helpful.

I am curious, how do you get the .ttf files? I am interested in referencing a 'light' Raleway font. Is this possible?

Justin_Cooperm2 · ‎11-01-2017

Absolutely, Google is really great with their web font library. You can check it out here: Google Fonts

For the Raleway font you can search it in that library and then they show examples of how to include it on a web page.

They'll show including something like https://fonts.googleapis.com/css?family=Raleway:300 to get a light version of the font. If you actually visit that page you'll see it's just normal CSS pointing to the actual web-hosted font files. However, the CSS they give is browser-specific (you'll get .woff .ttf .woff2 etc... depending on the user agent making the request. Google does post all the font files in git or you can find them all. This guy made a cool tool to help get them all Download Google Fonts - Simple PHP Script

Justin