Custom fonts in Drag and Drop emails

[rosell-dk]

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?

[charlottehall]

Totally agree! It's essential. 

[mcraciun]

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

[sapnamulani]

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

[JoWild]

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]

Hi! It's essential for us too!

[ShaneJ]

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]

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

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

[tomo]

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]

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]

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]

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

[mrspabs]

Thanks @kbbpatidar for the suggestion