Can I use Google fonts in emails? | Community
Skip to main content
Anonymous
Mar 8, 2016 8:23 PM UTC
Solved

Can I use Google fonts in emails?

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Justin_Cooperm2
Justin_Cooperm2Accepted solution
Level 10
Mar 8, 2016 11:50 PM UTC

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(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(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 reply

8 replies

Justin_Cooperm2
Justin_Cooperm2Accepted solution
Level 10
Mar 8, 2016 11:50 PM UTC

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(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(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).

Translate
Anonymous
Mar 9, 2016 12:08 PM UTC

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

Translate
Justin_Cooperm2
Justin_Cooperm2
Level 10
Mar 9, 2016 6:19 PM UTC

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/

Translate
Anonymous
Mar 8, 2016 8:35 PM UTC

In Marketo Emails? If so, check this out:

Change the Form Font Family - Marketo Docs - Product Docs

Translate
Anonymous
Mar 8, 2016 9:40 PM UTC

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:

     <link href='fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>

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(fonts.googleapis.com/css?family=Montserrat:400,700);

4. Define the style inline:

     <td style="font-family: 'Montserrat', arial, sans-serif; <more styles here>">

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!

Translate
Grégoire_Miche2
Grégoire_Miche2
Level 10
Mar 8, 2016 11:42 PM UTC

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

Translate
    Terms & ConditionsAccessibility statement

    Loading footer...