Inconsistent results when adding custom fonts to a theme

Developer Support CMS Development
1

I’m following this tutorial on adding custom fonts to a theme: Add custom fonts to a theme - HubSpot docs

When adding a single custom font, everything appears to work well, and I can successfully select the font when using the Rich Text Editor in Website Pages. However, when adding two fonts, the results are somewhat inconsistent:

  • Sometimes I can see both;
  • Sometimes I can only see one (either one or the other);
  • Sometimes I can’t see any.

I haven’t been able to identify any relevant patterns or errors.

Has anyone come across something like this? Thank you.

2

Have you seen this at the bottom of the page you linked “When using the rich text editor in the design manager, font options will not appear in the font selector dropdown menu.”
Are you able to share a page we can look at and inspect the css?
I really need to have a better understanding of how you are implementing this, if you are building the theme, working in a child theme, etc. Please give a bit more background so I can help out.
I imagine what you need to do is to set up CSS to handle your fonts, and add a class, or set them to H tags and p tags

<style>

h1, h2, h3, h4, h5, h6 {
 font-family: 'Playfair Display', serif;
}

p {
 font-family: 'Open Sans', sans-serif;
}

.font-heading {
 font-family: 'Playfair Display', serif;
}

.font-body {
 font-family: 'Open Sans', sans-serif;
}
</style>
3

Hi @nickdeckerdevs1 ,
Thank you for the quick reply. Here’s some more details on the subject:

Have you seen this at the bottom of the page you linked “When using the rich text editor in the design manager, font options will not appear in the font selector dropdown menu.”

I did see it. I’m not sure what they mean by “using the rich text editor in the design manager” but I can see my custom font when opening a Rich Text editor in Website Pages, here it is:

Screenshot 2025-04-16 at 11.47.22.png
Screenshot 2025-04-16 at 11.47.22.png1392×804 197 KB

I really need to have a better understanding of how you are implementing this, if you are building the theme, working in a child theme, etc. Please give a bit more background so I can help out.

Sure thing. I’m building a theme yes, I’m developing it locally and I then use the “hs upload” to sync it with Design Manager. This is what my project looks like in Design Manager right now:

Screenshot 2025-04-16 at 11.55.01.png
Screenshot 2025-04-16 at 11.55.01.png550×1110 62 KB

Please note that I have a font.json file for each font family and it’s structured like this:

{
 "name": "Vox",
 "default": "Regular",
 "fallback": "arial, sans-serif",
 "variants": [
 {
 "name": "Regular",
 "files": [
 {
 "file": "./TTF/Vox-Regular.ttf",
 "format": "truetype"
 },
 {
 "file": "./WEB/Vox-Regular.woff",
 "format": "woff"
 },
 {
 "file": "./WEB/Vox-Regular.woff2",
 "format": "woff2"
 }
 ],
 "styles": {
 "font-weight": 400
 }
 },
 {
 "name": "Bold",
 "files": [
 {
 "file": "./TTF/Vox-Bold.ttf",
 "format": "truetype"
 },
 {
 "file": "./WEB/Vox-Bold.woff",
 "format": "woff"
 },
 {
 "file": "./WEB/Vox-Bold.woff2",
 "format": "woff2"
 }
 ],
 "styles": {
 "font-weight": "bold"
 }
 },
 {
 "name": "Light",
 "files": [
 {
 "file": "./TTF/Vox-Light.ttf",
 "format": "truetype"
 },
 {
 "file": "./WEB/Vox-Light.woff",
 "format": "woff"
 },
 {
 "file": "./WEB/Vox-Light.woff2",
 "format": "woff2"
 }
 ],
 "styles": {
 "font-weight": 300
 }
 }
 ]
}

Are you able to share a page we can look at and inspect the css?

I can (and if it helps I definitely will) but this seems to be a deviation of what I’m actually trying to achieve. I’m trying to have both font families (Vox and Roboto) listed in the font family dropdown selector of a Rich Text editor (check first screenshot). At the moment, the behaviour seems to be very erratic, as after each deploy (using the ‘hs upload’ command), I could end up with both, either, or neither of the font families being listed.
Hope everything is clearer now.
Thank you!

4

Okay -- this helps out and thank you for the extra clarity. Those fonts show up because that isnt’ really a custom font, it’s a google font brought in. So that is likely why it shows up. (Yes it is “custom” -- lol but not custom custom)

So.. This is just speculation (I can verify if you send me a page url to preview -- you can DM me if you don’t want to publish it here).
When using the rich text editor and styling is happening, it can add HTML that overwrites your styles.

<h1><span style="font-family: roboto">This is text I selected as roboto</span></h1>

This is a basic example of what can happen when you make a selection in rich text mode
Your CSS stylesheet may be set up like

<style>
h1 { font-family: 'not-roboto'!important; }

h1 * { font-family: 'not-roboto'!important; }
</style>

If you share your page where you have some of these variations I can recommend some changes to help yo out

5

Hi again @nickdeckerdevs1 ,
I didn’t understand this sentence - Those fonts show up because that isnt’ really a custom font, it’s a google font brought in.
I believe they are indeed custom because I’m the one providing the ttf and woff files in Design Manager. If I want to name it to something else other than “Roboto”, I can do it. It’s all configured under that font.json file I’ve mentioned before.
About the HTML and CSS snippets you’ve shared, I can indeed do something like that but it defeats the purpose. My endgoal here is to provide my non-technical teammates (desiginers, content creators, marketeers…) a way of choosing between one of many custom fonts without having to mess with any HTML or CSS

6

Okay - then my assumption that you were just using a google font was incorrect. Okay, so they are custom.
The purpose of you providing me examples of your mismatched font issues is so we can address the actual issue in the CSS. CSS is cascading style sheets, they have specificity to them and something in the theme likely has more specificity than how the rich text editor is adding your font to the content.
Here is the plan I’m suggesting
- You provide examples of mismatch on live pages or preview pages (2 or 3 if possible, in differnet pages/modules where this mismatch of fonts has occured)
- You provide insight on which part is incorrect and which part is correct, noting the desired outcome
- I review examples, and then look at how the font is being added by the rich text editor, then I review the CSS stylesheets that are causing this mismatch to occur
- After review I can outline what needs to be changed or updated on the theme level, css level, child theme, whatever the setup here is.
- These changes would preserve your current site styling/design, however they would ensure that when these changes are made via the rich text editor, that they are respected. This would prevent any non technical person from even thinking about anything.
That is the goal here -- let me know if you want me to help you out

7

@nickdeckerdevs1 is still not clear to me how can this be a CSS related issue.
My only problem is related to HubSpot’s inconsistent behavior when adding custom fonts and making them available for selection in the Rich Text editor. Whenever they appear in the Rich Text editor, I can successfully apply their styles, and the generated CSS is correct.
I’m aware that there are other ways of loading fonts, and that I can set the font-family of my elements using CSS and HTML. The reason I’m persisting in adding custom fonts to a theme is essentially because it will make life a lot easier for my non-technical teammates.

8

Have you gotten any further debugging this issue? Would you like to share a page, possibly sending through a DM? I’d like to help you get this issue solved or to help report a bug.
Let me know how I can assist.

9

Hi @nickdeckerdevs1,
Wasn’t able to do any relevant progress. I’m thinking about moving forward with a single custom font (not multiple, as I wanted), which seems to be working fine enough.
Here’s a page with a Custom font: testing-1. You can look for the “This is a custom font” label. The font-family for this label is being added through a Rich text editor where my custom font appears available for selection.

10

This is an example of only one font working, correct? Are you able to implement the second font on here so that I can see when it doesn’t work?

11

That’s correct.
I’ve just deployed again - same link - trying to add a second font (“Roboto”). As you can see, the first font (“Vox”) is no longer working. In the Rich Text Editor I can only see “Roboto” now.
Nothing changed in the way I’m including the “Vox” font.

Screenshot 2025-04-22 at 15.55.43.png
Screenshot 2025-04-22 at 15.55.43.png459×235 27.9 KB

The font-family being applied to the wrapper span of “This is a custom font” label remains “Vox”, but the theme no longer includes the “Vox” font-family files.

12

Are you highlighting the text when you select this, or just changing the font?
What is going on here is HubSpot doesn’t remove the previous font style tags when you add the addtional font, it just wraps it again. I wonder if this is an issue
Here is a sample page https://imsotrash.com/custom-fonts?hs_preview=PtIvrYHx-189009029396
This is the Clear Styles (clear formatting) button: CleanShot 2025-04-22 at 11.38.20
It might be best to clear the styles if you see these issues and reapply the font after the styles have been cleared

13

It might be best to clear the styles if you see these issues and reapply the font after the styles have been cleared

This is true, but let me point out this is not the main issue. The issue is that the previous font is no longer being loaded by the theme (or even available in the Rich Text Editor), while the configuration is still there.

14

I eventually reached out to HubSpot Support, and this was confirmed to be unexpected behavior.

It turns out the problem wasn’t related to uploading a second font, but rather to using the --clean flag when uploading a theme via the CLI, which I had been doing while debugging.

It was eventually fixed, and it’s now working as expected.

15

oh my, that is super odd. glad it is resolved now. what does the --clean
flag do?

16

@nickdeckerdevs it’s essentially starting with a clean slate