Email Marketing Tool

kwisness
Miembro

Drag and Drop Email Font Options

resolver

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 Soluciones aceptada
MFrankJohnson
Solución
Líder intelectual

Drag and Drop Email Font Options

resolver

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


www.mfrankjohnson.com

Ver la solución en mensaje original publicado

21 Respuestas 21
lordbagel
Participante

Drag and Drop Email Font Options

resolver

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
Administrador de la comunidad
Administrador de la comunidad

Drag and Drop Email Font Options

resolver

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 !




ARose
Participante

Drag and Drop Email Font Options

resolver

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
Colaborador

Drag and Drop Email Font Options

resolver

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
Participante

Drag and Drop Email Font Options

resolver

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
Participante

Drag and Drop Email Font Options

resolver

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!

0 Me gusta
ERadtke
Miembro

Drag and Drop Email Font Options

resolver

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

0 Me gusta
santicu
Participante

Drag and Drop Email Font Options

resolver

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

 

0 Me gusta
rorycs
Participante

Drag and Drop Email Font Options

resolver

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 Me gusta
kpatel4
Participante

Drag and Drop Email Font Options

resolver

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.

j_a_n
Miembro

Drag and Drop Email Font Options

resolver

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

0 Me gusta
santicu
Participante

Drag and Drop Email Font Options

resolver

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

0 Me gusta
MiWe
Participante

Drag and Drop Email Font Options

resolver

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

 

EJVFernyhough
Participante

Drag and Drop Email Font Options

resolver

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
Solución
Líder intelectual

Drag and Drop Email Font Options

resolver

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


www.mfrankjohnson.com
rosell-dk
Participante | Partner nivel Gold
Participante | Partner nivel Gold

Drag and Drop Email Font Options

resolver

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
Participante

Drag and Drop Email Font Options

resolver

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

MFrankJohnson
Líder intelectual

Drag and Drop Email Font Options

resolver

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


www.mfrankjohnson.com
0 Me gusta
rosell-dk
Participante | Partner nivel Gold
Participante | Partner nivel Gold

Drag and Drop Email Font Options

resolver

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
Líder intelectual

Drag and Drop Email Font Options

resolver

 

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


www.mfrankjohnson.com
0 Me gusta