HubSpot Ideas

rosell-dk

Custom fonts in Drag and Drop emails

When creating Drag and Drop emails, you can currently only choose between a selected few fonts. While custom fonts is possible in email templates, it is not currently possible in Drag and Drop emails.

 

As fonts are an important part of a brand and embedded fonts are gaining wide support in email clients, it would be very nice to have full control over fonts in drag and drop emails.

 

Simply put,  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?

31 Replies
charlottehall
Participant

Totally agree! It's essential. 

mcraciun
HubSpot Employee

+1! Looking for fonts like Noto Sans SC or Noto Sans KR or Noto Sans JCK

sapnamulani
Member

Not sure how many votes would make HubSpot act upon it, 

JoWild
Participant

Hi, 

 

Same for us, we love to use Drag and drop but will be much better for consistency of the brand to use Railway font and Varela !

Thanks per advance for your help.

 

Joséphine from Wild Code School

kcmdm
Member

Hi! It's essential for us too!

Shane_Janssens
HubSpot Product Team

Hi @ro, thank you for the idea and for all the feedback. We are hoping to review this, but this is not planned for development in the next quarter. For transparency and clarity, I am updating this issue to 'Not currently planned' for the time being. I will update here once we have plans in place.

 

Best,

 

Shane

Dirk_Kolassa
Participant

really a shame. It will be for us a go/no go decision to continue with HubSpot.

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. 

tomo
Participant

I agree this is something that is needed vs trying to use a "hack", though it looks like I will be going the "hack" route for the time being.

BriDehlinger
Participant

Voting this up! The explanation that custom fonts aren't supported by email clients is BS. It's frustrating that basic functions of HubSpot are often the ones that we have to go to battle for. 

khomer
Member

This is a huge problem for us as well. I don't understand why it's available for landing pages but not for emails. Even if we can't add custom fonts, as a compromise, we need a more significant list of web fonts available. 

mrspabs
Top Contributor | Elite Partner

I dont understand why you can use Lato and Merriweather, but not other google fonts. Makes no sense. 

mrspabs
Top Contributor | Elite Partner

Thanks @kbbpatidar for the suggestion

Mad_Max
Member

Hubspot definitely needs to make this possible.

For the time being however, @kbbpatidar's suggestion worked a treat!

EMarchena
Member

Highly needed. Can't create a custom marketing idea and branding without the possibility to use the branded font.

dsecareanu
Top Contributor | Partner

+1 we need to be able to add more web fonts to our email marketing (open sans, etc.). Thanks!

VNair4
Member

Correct. The fact that this still hasn't been resolved is worrisome. The font is a fundamental part when it comes to the branding of a company.

Jeff-Morgan
Contributor

Another mysteriously missing Hubspot component that makes it an unworkable solution.

LMontoyaLaske
Member

@kbbpatidar , thanks for the hack. As I do not have html exp, how do I change font color from there?

kbbpatidar
Participant

Hey, @LMontoyaLaske You are welcome. You can actually use the text editor itself to change the color. That feature already exists. You can select the text that you like to have a different color and change it.