Setup custom fonts

[tinadang211]

Hi, I’ve been waiting for slack community access but no news yet so I guess I’m going to share the issue I have here.

Here’s the link to the Design Manager: Design Manager | HubSpot

Here’s the file structure that I have:

Fonts were uploaded:

fonts.json file:

[
{
“name”: “Source Serif Pro”,
“default”: “Regular”,
“fallback”: “Georgia, serif”,
“variants”: [
{
“name”: “Regular”,
“files”: [
{
“file”: “./WEB/SourceSerifPro-Regular.woff”,
“format”: “woff”
},
{
“file”: “./WEB/SourceSerifPro-Regular.woff2”,
“format”: “woff2”
}
],
“styles”: {
“font-weight”: 400
}
},
{
“name”: “Bold”,
“files”: [
{
“file”: “./WEB/SourceSerifPro-BoldIt.woff”,
“format”: “woff”
},
{
“file”: “./WEB/SourceSerifPro-BoldIt.woff2”,
“format”: “woff2”
}
],
“styles”: {
“font-weight”: “bold”
}
}
]
},
{
“name”: “Figtree”,
“default”: “Light”,
“fallback”: “Arial, sans-serif”,
“variants”: [
{
“name”: “Light”,
“files”: [
{
“file”: “./WEB/Figtree-Light.woff”,
“format”: “woff”
},
{
“file”: “./WEB/Figtree-Light.woff2”,
“format”: “woff2”
}
],
“styles”: {
“font-weight”: “light”
}
}
]
},
{
“name”: “Roboto Condensed”,
“default”: “Regular”,
“fallback”: “Arial, sans-serif”,
“variants”: [
{
“name”: “Regular”,
“files”: [
{
“file”: “./WEB/RobotoCondensed-Regular.woff”,
“format”: “woff”
},
{
“file”: “./WEB/RobotoCondensed-Regular.woff2”,
“format”: “woff2”
}
],
“styles”: {
“font-weight”: 400
}
},
{
“name”: “Bold”,
“files”: [
{
“file”: “./WEB/RobotoCondensed-Bold.woff”,
“format”: “woff”
},
{
“file”: “./WEB/RobotoCondensed-Bold.woff2”,
“format”: “woff2”
}
],
“styles”: {
“font-weight”: “bold”
}
}
]
}
]

===========

theme.json file:

{
“label” : “Presence Theme”,
“preview_path” : “./templates/pages/typography-qa.html”,
“enable_domain_stylesheets” : false,
“is_available_for_new_content” : true,
“extends” : “pike_lite”,
“responsive_breakpoints” : [ {
“mediaQuery” : “@media (max-width: 767px)”,
“messages” : { },
“name” : “mobile”,
“previewWidth” : {
“units” : “px”,
“value” : 520
}
} ],
“version” : “1.2.0”,
“author” : {
“name” : “”,
“email” : “”
},
“global”: {
“typography”: {
“font”: [
{
“label”: “Source Serif Pro”,
“value”: “‘Source Serif Pro’, Georgia, serif”
},
{
“label”: “Figtree”,
“value”: “‘Figtree’, Arial, sans-serif”
},
{
“label”: “Roboto Condensed”,
“value”: “‘Roboto Condensed’, Arial, sans-serif”
}
]
}
}
}

======

My goal is to have these fonts to show up in the email editor’s font dropdown under template fonts, for example:

Something is not right somewhere but I’m not sure so I’m looking forward to recommendations. Thanks!

[GiantFocal]

Hi @tinadang211,

HubSpot email editor supports only a limited selection of web-safe and Google Fonts by default. It does not support custom fonts. Only website pages, landing pages, and modules can use custom fonts.

[tinadang211]

Hi @GiantFocal , thanks for replying. The screenshot I shared above with template fonts is what we currently have and I want to switch it to websafe fonts (source serif pro and figtree). I don’t mind if they go under webfonts either but none showed up.

[Anton]

Hey @tinadang211,

while @GiantFocal is correct with HubSpot Emails editor don’t support custom fonts by default, there are ways how you can achieve your goal. It will come with drawbacks, but there are ways.

First of all:

From my experience, the documented way of adding fonts via theme, and a JSON might be working in some cases, but - tbh - it’s somewhat unneccearry.

The reason for this is:
If you add a custom font, you will most likely have defined styles for body/paragraph, h-tags, buttons …
So giving a content editor/marketing manager the ability to use custom fonts “randomly” will most likely end up in breaking your corporate design guidelines.

Something I always do (and recommend) is:
Import the custom font via an import-rule (CSS) or link-tag (html), add some style definitions to the CSS globally and you’re good to go. The most important part for this is: Creating a rich-text(RTE) module that doesn’t have font-settings in it. A documentation about how you can modify the RTE can be found here.

When it comes to email development it’s a whole different world as most email clients (Outlook, Thunderbird and such) are anchient

Their web-versions are better, but also don’t support everything a browser does.

Now, back to the initial topic:

The only proven way how you can add custom fonts or create emails with custom fonts is to create HTML templates, as something like {% require_css %} or {% require_head %} won’t work in custom email modules - or even if it technically will - the reciever client will most likely strip it. Outlook and Gmail are famous for stripping almost everything and behaving completely different. So you have to put all the styles(like h-tags, body styles, link styles …) into one (email clients might strip others) <style> tag in the template.

This means:

You can create fully custom email templates via HTML templates, add default and custom modules, styles to it and do basically whatever you like. The most important part here is to make sure the email client will support the feature you’re putting in.

I recommend to check CanIEmail for every style related feature you’re about to put into the tempalte and using something like mjml to create a responsive email template.
With a mjml template, you will need to add all the HubLs, before being able to use it, but it’s way easier than writing it from scratch.

hope this helps

best,

Anton

[tinadang211]

Hey @ATone thanks for your reply. I appreciate it!

Our team is looking for a solution for the above issue, not recommendations tbh.

Our problem is the template fonts were implemented a couple months ago (meaning this is do-able) and now we just want to update them BUT the new fonts would not show up. We’re just puzzled with the outcome

[Anton]

Hey @tinadang211,

you’re welcome.

Since you like a solution:

Use default fonts from the email rich-text selector. It’s the only thing that will work flawlessly without a email template developer creating something completly custom for you.

The reason for this is, that while the documented way of implementing custom fonts in HubSpot will work for pages like websites, landing pages and blogs, it’s not designed for being supported in emails. Also it’s by far not the only one.

It has nothing to do with HubSpot but the reciepients client which is completely outside of anyones control.

The only thing you (or anyone) can do is to minimize the potential display of a default font by creating custom HTML email templates and a lot of “hard coding”.

Just an example: The Outlook “desktop app” is rendering emails completely differently than the Outlook “web version”, Gmail is rendering emails differently, Apple Mail is rendering emails differently, Thunderbird, inxmail - every client is working/rendering differently. It’s a whole different topic than developing something like a website. And again - it has nothing to do with HubSpot.

You have to decide for yourself:

1. Create custom email templates, which will can be “perfect corporate design compliant” but will have the drawback of no drag&drop functionality
2. Have drag&drop functionality but not using the corporate font.

There are no other options. I know it’s most likely not the answer you’d like to hear, but it’s simply not as simple as for websites. Even if you should get it to work in Hubspot, send out a few test emails, open them in different clients and you’ll see the real-world result. Or use the “test in email client” option in HubSpot (won’t display the email by 100% accuracy)…

best,

Anton

[GRajput]

Hi @tinadang211

Custom fonts defined in your fonts.json file won’t show up in HubSpot’s email editor font dropdown, since the editor only supports a limited, built-in set of fonts to ensure broad compatibility across email clients.
Workaround options:
If you still want to use custom fonts in an email:
1. Inline CSS using @font-face (not widely supported in email clients):

<style type="text/css">
 @font-face {
 font-family: 'Figtree';
 src: url('https://yourdomain.com/fonts/Figtree-Light.woff2') format('woff2');
 }

</style>
<p style="font-family: 'Figtree', Arial, sans-serif;">This is using Figtree.</p>

2. Link to a web font in the <head> tag
Custom fonts will appear and function properly in landing pages, website pages, and modules—just not in email templates due to client limitations.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.

Thanks!

[tinadang211]

Hey hi @GRajput thanks for your suggestions but we do have the template fonts in the font dropdown at the moment using what I shared above (fonts.json, etc.) and would like to update them to other fonts.

[tinadang211]

Got an answer from a support agent (she is amazing!!!): Content Creator | HubSpot - 8 August 2025 | Loom

[Jaycee_Lewis]

Thank you so much for coming back and sharing the solution @tinadang211 — Jaycee

[jnix284]

@tinadang211 I wanted to share this update with you about custom fonts for emails:

new public beta: Custom Fonts in Marketing Email (all hubs/tiers)
What is it?
Custom fonts from your Brand Kit now appear in the font selector dropdowns of the drag-and-drop Marketing Email editor — no custom coding required.
Why does it matter?
You can now apply your brand’s custom fonts directly in the drag-and-drop editor, so you don’t have to choose between using an easy-to-build template and staying true to your brand guidelines.
How does it work?
review the product update for step-by-step instructions
Important limitation: Custom fonts are only supported and will be displayed in limited email clients such as Apple Mail. Other popular email clients like Gmail, Outlook, and Yahoo do not support custom fonts and will display the fallback font instead. This means recipients using these clients will see your specified fallback font (e.g., Arial, Helvetica, Times New Roman) rather than your custom font.
Note: Google Font support coming soon

[Cna361]

Looks like you already got the answer from the support agent’s Loom — glad it’s resolved! For anyone else hitting this, the key is that custom font updates in HubSpot require the `fonts.json` paths, `theme.json` typography array, and actual uploaded font files to all align perfectly, otherwise new fonts silently fail to appear in the template dropdown. Also double-check that your theme cache is cleared after changes, since stale cached fonts often block new text styles from showing up in the editor.