topic Re: Google Font in Drag-And-Drop Email in CMS Development

Google Font in Drag-And-Drop Email

TFarmer — Tue, 07 Mar 2023 18:31:22 GMT

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!

Re: Google Font in Drag-And-Drop Email

Jaycee_Lewis — Wed, 08 Mar 2023 18:13:35 GMT

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

Re: Google Font in Drag-And-Drop Email

Sjardo — Wed, 08 Mar 2023 22:26:43 GMT

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!

Re: Google Font in Drag-And-Drop Email

piersg — Thu, 09 Mar 2023 13:36:56 GMT

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.

Re: Google Font in Drag-And-Drop Email

TFarmer — Thu, 09 Mar 2023 14:09:09 GMT

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.

Re: Google Font in Drag-And-Drop Email

piersg — Fri, 10 Mar 2023 09:55:13 GMT

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

Re: Google Font in Drag-And-Drop Email

TFarmer — Tue, 14 Mar 2023 16:46:46 GMT

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

Re: Google Font in Drag-And-Drop Email

TFarmer — Wed, 15 Mar 2023 14:44:46 GMT

Awesome—thanks for all of this, @piersg

Re: Google Font in Drag-And-Drop Email

stewf — Thu, 16 May 2024 19:43:53 GMT

Thanks for this! It’s true that many email clients don’t support webfonts, but iOS Mail does, and it has a signficant user base. Type is key to the visual identities of most brands, so webfonts should be a basic consideration for email marketing.

Re: Google Font in Drag-And-Drop Email

stewf — Thu, 16 May 2024 19:50:22 GMT

@TFarmerWere you able to integrate webfonts into your drag-and-drop template? I’d like to do the same and hoping you were successful.

Re: Google Font in Drag-And-Drop Email

TFarmer — Fri, 17 May 2024 14:48:27 GMT

We were technically able to, but ended up using a HubSpot-integrated web font for more across the board ease-of-use for the client

Re: Google Font in Drag-And-Drop Email

DHearn — Thu, 14 Nov 2024 10:05:03 GMT

You can't edit head when in drag and drop email editor. You can only edit source code of blocks. If you try and add in a

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

Hubspot drag and drop editor will strip it out. So from what I can see its not possible to add your own webfont unless you use custom HTML template. Silly really as they let you embed google LATO but not different ones?!

Re: Google Font in Drag-And-Drop Email

Jnix284 — Mon, 20 Apr 2026 17:14:36 GMT

@TFarmer as @Sjardo shared previously, there are limitations for using custom fonts in marketing emails and it's not typically recommended for readability or compatibility with ESPs, but wanted to share a new beta that will allow you to configure custom fonts a bit easier moving forward.

new public beta: Custom Fonts in Marketing Email (all hubs/tiers)

What is it?Custom fonts from your Brand Kit now appear in the font selector dropdowns of the drag-and-drop Marketing Email editor — no custom coding required.

Why does it matter?You can now apply your brand's custom fonts directly in the drag-and-drop editor, so you don't have to choose between using an easy-to-build template and staying true to your brand guidelines.

How does it work?review the product update for step-by-step instructions

Important limitation: Custom fonts are only supported and will be displayed in limited email clients such as Apple Mail. Other popular email clients like Gmail, Outlook, and Yahoo do not support custom fonts and will display the fallback font instead. This means recipients using these clients will see your specified fallback font (e.g., Arial, Helvetica, Times New Roman) rather than your custom font.

Note: Google Font support coming soon

Re: Google Font in Drag-And-Drop Email

TFarmer — Mon, 20 Apr 2026 19:14:21 GMT

That's great, Jennifer — thanks for letting me know.

Re: Google Font in Drag-And-Drop Email

stewf — Tue, 21 Apr 2026 03:45:19 GMT

This is fantastic news, thank you!