Can I use Google fonts in emails? | Community
Skip to main content
A
Anonymous
March 8, 2016
Solved

Can I use Google fonts in emails?

  • March 8, 2016
  • 2 replies
  • 13128 views

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.
Best answer by Justin_Cooperm2

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

2 replies

Justin_Cooperm2
Justin_Cooperm2Accepted solution
New Participant
March 8, 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(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).

A
Anonymous
March 9, 2016

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

Justin_Cooperm2
Justin_Cooperm2
New Participant
March 9, 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/

A
Anonymous
March 8, 2016

In Marketo Emails? If so, check this out:

Change the Form Font Family - Marketo Docs - Product Docs

A
Anonymous
March 8, 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:

     <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!

Grégoire_Miche2
Grégoire_Miche2
New Participant
March 8, 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

    Terms & ConditionsAccessibility statement

    Loading footer...