Drag and Drop Email Font Options

SOLVE
kwisness
Member

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.

1 Accepted solution

Accepted Solutions
MFrankJohnson
Solution
Thought Leader

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.

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


Frank on LinkedIn

HubSpot's Hiring World-Wide!

View solution in original post

15 Replies 15
MFrankJohnson
Solution
Thought Leader

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.

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


Frank on LinkedIn

HubSpot's Hiring World-Wide!

View solution in original post

rosell-dk
Participant | Gold Partner

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?

MFrankJohnson
Thought Leader

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

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


Frank on LinkedIn

HubSpot's Hiring World-Wide!

0 Upvotes
rosell-dk
Participant | Gold Partner

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
Thought Leader

 

designer-client-gif.gifEveryone 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.

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


Frank on LinkedIn

HubSpot's Hiring World-Wide!

0 Upvotes
udayanw
Participant

The drag and drop builder right now is miles behind tools like Mailchimp, Autopilot etc. Roboto, Shopify Sans are all used by Google, Shopify etc in their emails.

 

These companies send out emails to millions if not billions of people. So please, don't give us the if you'd like to complicate things it's your choice jargon.

 

The primary reason why custom fonts are not there is because Hubspots email sending servers are shared and they would like to have a consistent or an easier way to handle these fonts.

 

Quite lazy from the product team if I'm being honest. A smarter solution is needed. 

EJVFernyhough
Participant

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.

MiWe
Participant

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

 

kbbpatidar
Participant

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. 

rorycs
Participant

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?

0 Upvotes
kpatel4
Participant

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)

Screen Shot 2021-05-10 at 9.39.10 AM.png

This is what I get 

Screen Shot 2021-05-10 at 9.38.34 AM.png

I hope this helps. 

Thank you.

alivia
Contributor

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 😕

0 Upvotes
ARose
Participant

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.

0 Upvotes
lordbagel
Participant

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.

0 Upvotes
PamCotton
Community Manager

Hello @lordbagelIf 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

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !