Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

Can I use Google fonts in emails?

Go to solution
Anonymous
Not applicable
‎03-08-2016 12:23 PM
‎03-08-2016 12:23 PM

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.

0 Likes
10,898
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
Justin_Cooperm2
Level 10
Level 10
‎03-08-2016 03:50 PM
‎03-08-2016 03:50 PM

Re: Can I use Google fonts in emails?

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

7,503
Reply
8 REPLIES 8
Anonymous
Not applicable
‎03-08-2016 12:35 PM
‎03-08-2016 12:35 PM

Re: Can I use Google fonts in emails?

In Marketo Emails? If so, check this out:

Change the Form Font Family - Marketo Docs - Product Docs

0 Likes
7,503
Reply
Anonymous
Not applicable
‎03-08-2016 01:40 PM
‎03-08-2016 01:40 PM

Re: Can I use Google fonts in emails?

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='http://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(http://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!

0 Likes
7,503
Reply
Grégoire_Miche2
Level 10
Level 10
‎03-08-2016 03:42 PM
‎03-08-2016 03:42 PM

Re: Can I use Google fonts in emails?

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

7,503
Reply
Justin_Cooperm2
Level 10
Level 10
‎03-08-2016 03:50 PM
‎03-08-2016 03:50 PM

Re: Can I use Google fonts in emails?

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

7,504
Reply
Anonymous
Not applicable
‎03-09-2016 04:08 AM
‎03-09-2016 04:08 AM

Re: Can I use Google fonts in emails?

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

0 Likes
7,503
Reply
Justin_Cooperm2
Level 10
Level 10
‎03-09-2016 10:19 AM
‎03-09-2016 10:19 AM

Re: Can I use Google fonts in emails?

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/

7,503
Reply
Roy_Hegger1
Level 2
Level 2
‎11-01-2017 09:15 AM
‎11-01-2017 09:15 AM

Re: Can I use Google fonts in emails?

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?

0 Likes
7,503
Reply
Justin_Cooperm2
Level 10
Level 10
‎11-01-2017 04:31 PM
‎11-01-2017 04:31 PM

Re: Can I use Google fonts in emails?

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

7,503
Reply
Home