Drag and Drop Email Font Options

[kwisness]

We are new to HubSpot and love the Drag and Drop Email option. However, there are only a handful or so font options available. When will more font options be available? Our brand's recommended font is Century Gothic, and we would like to use it. I'm sure others have other fonts they would like to use but aren't available.

[lordbagel]

Come on HubSpot. We really have to hack around this? The css above works, but not for buttons / CTAs and doesn't bring up the new font option in any dropdowns for me.

[PamCotton]

Hello @lordbagel, If you are still unable after following the CSS above, I would recommend connecting with HubSpot Technical Support, as Support is included in your subscription and they will be able to provide real-time assistance for this matter, including hopping on a screen share if necessary. 

Kindly,

Pam

[ARose]

I completely agree kwisness! I was shocked to see so few font options in HubSpot's drag and drop email. There are many web-friendly fonts that are missing from HubSpot. We use Open Sans and that's not an option. Coding emails for a custom font is just not worth it. We just moved over from MailChimp, which is leaps and bounds above HubSpot when it comes to fonts, which are all web-friendly by the way. I would expect a marketing leader like HubSpot to be regularly updating available, web-friendly font choices in their expensive Marketing Hub.

[alivia]

Hello,

I definitely agree that this is a must need feature. Using custom fonts fallbacks to a default when the font isn't supported, so the user experience isn't in jeopordy here.

However brand consistency is fondamental for most companies today - we need whatever we use on our websites or sales presentations to be the same as our email fonts to simply appear as a coherent structure, and I really hope Hubspot isn't pushing for a world where every company chooses from one of 7 fonts to buid branding, because that's not a world I want to live in 😉

Also if that's what you're going for, it's also deeply incoherent that you've added some fonts but don't allow us to add more fonts.

After this rant let me be helpful though: 

For text blocks you can actually use the "edit source code" option to change the font in the HTML - something like this:

<h3 style="font-family: 'Source Sans Pro', arial, helvetica, sans-serif; font-size: 20px; font-weight: 400; text-align: right; color: #8e8e8e; font-style: italic;">Bla bla bla</h3>

However this can't be done for CTAs which makes my email quite wonky looking 😕

[kbbpatidar]

Hey all, 

I have been using this 'HACK' to overcome the current issue of not being able to use the custom google fonts in the Drag & Drop Builder. Please use this with your 110% testing, but it works for me. 

So this is what I suggest, 

1. In your Drag & Drop email - you add HTML module (If you don't have it, download it from Marketplace.) 
2. Once you add the HTML module, you will be able to see the left side editor as usual, this is where you add below listed code. 

3. Things to know: In first part of the <style></style> you can define fonts that you would like to use. Then in the 2nd part of the <style></style> make sure you apply the fonts that you would like to apply with HubSpot provided data-hse-inline-css="true" attribute. 

4. Once you do that you will instantly see the changes, then you can preview your changes and test it as well. 

<!-- Add your font face style -->
<style type="text/css">
  @media screen {
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 500;
      src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gTD_vx3rCubqg.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 600;
      src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gTD_vx3rCubqg.woff2) format('woff2');
    }
  }
</style>
<!-- Add your font face style -->

<!-- Add your regular style with data-hse-inline-css="true" if you are using this in Drag & Drop Buuilder -->

<style type="text/css" data-hse-inline-css="true">
  table, tr, td, th, ol, li, ul, p {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 400; 
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif; 
  }
  h1, h2 {
    font-style: normal;
    font-weight: 600;
  }
  h3, h4, h5, h6 {
    font-style: normal;
    font-weight: 500;
  }
</style>

<style type="text/css">
  <!-- Any extra CSS that you would like to override will go here unless you want to add those style to inline. Otherwise add that in above style tag -->
</style>

I hope this help. 

Ask if any question. 

[efellefred]

Hi I haven't been able to find the HTML tool in the marketplace, would you mind pointing me to it? I've search several ways and even browsed all new releases:
https://app.hubspot.com/ecosystem/2032370/marketplace/apps/all-categories?eco_search=HTML%20module

Thank you!

[ERadtke]

I am not seeing this code change my email fonts, could you advise? Perhaps I am not inputting it correctly. 

[santicu]

Thanks for this detailed answer. I'm finding the issue that I don't see it implemented. Any tips? 

[rorycs]

This is amazing, thank you!!

I do seem to be having issues with button fonts though, as they are determined through a font drop down not a style one, would there be a way I could override a font?

[kpatel4]

Hey there, I have been using this the way I suggested above, and when I do that I do see custom font that I applied via CSS in the dropdown in the WYSIWYG editor too. 

Look at my screenshot, that might help you.

This is what I have using the HTML module (Defined in step #1)



This is what I get 



I hope this helps. 

Thank you.

[j_a_n]

@kpatel4 Interesting! I tried what you suggested and my custom fonts are in the drop-down menu as template fonts like in your screenshot... however, when I try to select it, nothing happens to my text. The font doesn't change. 😞 

[santicu]

When I select the font, it does not change anything. Did you have the same issue?

[MiWe]

I´d like to have drag/drop option for fonts too! Would be great to have that available soon!

[EJVFernyhough]

Hi Kwisness, 

It would be great if there were more fonts available to use in HubSpot. Not only that, but it would also be very useful if more font sizes were available too! At the moment, the fonts jump from 24px to 28px (26 would be nice!), then to 30px, then to 36px, then to 48px, and upwards from thereon in increments of 12px. 

Sometimes when writing copy for headers etc., an ideal phrase is devised for the content but because these other sizes can't be selected, it ends up looking awkward because it either runs on to 2 lines or doesn't fill the width of the margins properly. As a result, a new bit of copy has to be written which wasn't quite as accurate as the preferred version. 

It would be really cool if between 30-50px the scale went up in increments of 2px, or even 4px just to give users a bit more flexibility.

[MFrankJohnson · Accepted solution]

Q: We are new to HubSpot and love the Drag and Drop Email option. However, there are only a handful or so font options available. When will more font options be available? Our brand's recommended font is Century Gothic, and we would like to use it.?

Short A: n/a

Longer A:

"Custom fonts aren't supported in most popular email clients. It's a best practice to use default web fonts in your emails to ensure a consistent experience for your readers."

- see Add custom fonts to your email

That being said, you can also use Google Fonts, Font Awesome, or Typekit in HubSpot.

- see Edit the font on your pages, blog posts, or email

Head's up. Century Gothic may not have a free web safe equivalent, but there are fonts that look very similar.

[rosell-dk]

Your section about Google Fonts being possible, where you link to Edit the font on your pages, blog posts, or email may give the impression that it is possible to use Google Fonts in Drag and Drop templates. This is not the case.

I guess the original question is meant as a feature request. If we can have Lato, why can't we have other popular fonts, such as Open Sans. Indeed, why can't we simply have any we'd like?

[efellefred]

this. drived me nuts that as a design agency we can't match the COMMON fonts we use in every other document.

[MFrankJohnson]

>>" If we can have Lato, why can't we have other popular fonts, such as Open Sans. Indeed, why can't we simply have any we'd like?"

"Custom fonts aren't supported in most popular email clients. It's a best practice to use default web fonts in your emails to ensure a consistent experience for your readers."

[rosell-dk]

Some argues that it on the contrary is best practise to use custom fonts.

https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/

https://www.campaignmonitor.com/blog/email-marketing/2019/04/using-web-fonts-in-email/

It makes your email stand out in the email clients that supports it and falls back gracefully to standard fonts if not.

According to the authors, the following email clients supports custom fonts:

– iOS Mail
– Apple Mail
– Android (default mail client, not Gmail app)
– Outlook 2000
– Outlook.com app
– Thunderbird

It is not that bad, is it? And I suppose that support only will be rising.

Anyway, I believe that the decision wether to use custom fonts or not should fall upon the users, not the platform

[MFrankJohnson]

Everyone has the right to complicate email templates & testing with fallback fonts.

>>"... the decision wether to use custom fonts or not should fall upon the users, not the platform."

Good point. Excellent suggestion for the HubSpot Ideas forum.