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 Kommentare
charlottehall
Teilnehmer/-in

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
Mitglied

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

JoWild
Teilnehmer/-in

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
Mitglied

Hi! It's essential for us too!

Status aktualisiert zu: Not Currently Planned
Shane_Janssens
HubSpot-Produktteam

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
Teilnehmer/-in

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

kbbpatidar
Teilnehmer/-in

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
Teilnehmer/-in

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
Teilnehmer/-in

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
Mitglied

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
Stratege/Strategin | Elite Partner

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

mrspabs
Stratege/Strategin | Elite Partner

Thanks @kbbpatidar for the suggestion

Mad_Max
Mitglied

Hubspot definitely needs to make this possible.

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

EMarchena
Mitglied

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

dsecareanu
Stratege/Strategin | Partner

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

VNair4
Mitglied

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
Mitwirkender/Mitwirkende

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

LMontoyaLaske
Mitglied

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

kbbpatidar
Teilnehmer/-in

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.