CMS Development

TFarmer
Member

Google Font in Drag-And-Drop Email

SOLVE

Hey, all. Working on a drag-and-drope email template and attempting to embed a Google Font in a text block via the WYSIWYG More > Edit Source Code, but not taking. Doable or no?

Thanks in advance!

0 Upvotes
1 Accepted solution
piersg
Solution
Key Advisor

Google Font in Drag-And-Drop Email

SOLVE

Fair enough. Using my example above, you'd do something like this:

<head>
  ...
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
    body {
      font-family: 'Inter', Arial, sans-serif;
    }
  </style>
</head>

 

In practice, a lot of email clients will strip the style out of the head (or simply don't support @import or @font-face) so if the client absolutely insists, you'll need to write your font styles inline which might not be possible in a WYSIWYG email template as elements can be added/removed at will. Unless you're also custom building the email modules for them I suppose.

<td style="font-family: 'Inter', Arial, sans-serif">.

 

 

Font-face would be done like this, for the record. You can find this CSS by copy-pasting the fonts.googleapis.com URL of the font you want into your browser.

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 

Litmus has a good write up of fonts in emails here

View solution in original post

7 Replies 7
piersg
Key Advisor

Google Font in Drag-And-Drop Email

SOLVE

Hi @TFarmer (thanks @Jaycee_Lewis). You have to add it as an @import in the head of the email template

<head>
  ...
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
  </style>
</head>

 

Generally speaking though @Sjardo is correct when he says it's better to use the default fonts.  A lot of email clients don't have support for non-default web fonts. You can find out more in this Hubspot article.

0 Upvotes
TFarmer
Member

Google Font in Drag-And-Drop Email

SOLVE

A belated thanks for this. I guess I'm still a little confused though—if I'm wanting to retain the drag-and-drop toolset, how would I access the email header to alter? I know I can edit source code for text blocks via the WYSIWYG, but, in my case, my first block is an image, with no WYSIWYG and no option to edit source code....

0 Upvotes
TFarmer
Member

Google Font in Drag-And-Drop Email

SOLVE

Yeah, I know it's not really best practice, but the client really wants to try some web fonts, even if they don't show for some recipients. So, @piersg if we're adding that to an email head, how do we then use the font in subsequent blocks, like a text block? Thanks in advance for explaining this.

0 Upvotes
piersg
Solution
Key Advisor

Google Font in Drag-And-Drop Email

SOLVE

Fair enough. Using my example above, you'd do something like this:

<head>
  ...
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
    body {
      font-family: 'Inter', Arial, sans-serif;
    }
  </style>
</head>

 

In practice, a lot of email clients will strip the style out of the head (or simply don't support @import or @font-face) so if the client absolutely insists, you'll need to write your font styles inline which might not be possible in a WYSIWYG email template as elements can be added/removed at will. Unless you're also custom building the email modules for them I suppose.

<td style="font-family: 'Inter', Arial, sans-serif">.

 

 

Font-face would be done like this, for the record. You can find this CSS by copy-pasting the fonts.googleapis.com URL of the font you want into your browser.

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 

Litmus has a good write up of fonts in emails here

TFarmer
Member

Google Font in Drag-And-Drop Email

SOLVE

Awesome—thanks for all of this, @piersg 

0 Upvotes
Sjardo
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Google Font in Drag-And-Drop Email

SOLVE

Hi,

I have no knowledge about font's in email, but I would try to avoid them when possible! Even tho it looks nice, it's often easier to read a email in simple font 🙂 Try to spice up your email branding with images and colours. Often works best.

 

If you really want to go fancy... be my guest tho!

 

Jaycee_Lewis
Community Manager
Community Manager

Google Font in Drag-And-Drop Email

SOLVE

Hi, @TFarmer 👋 Thanks for reaching out. Hey, @Sjardo @piersg have you braved these waters? Or thought about other ways to tackle this issue?

 

Best,

Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes