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.
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."
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.
Hello @lordbagel, If 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.
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.
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 😕
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 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?
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)
@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. 😞
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.
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."
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?
>>" 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.