Custom fonts in Drag and Drop emails

HubSpot Ideas
9

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.