topic Re: Configuring a Custom Font to set in Theme Settings in CMS Development

Configuring a Custom Font to set in Theme Settings

ndickiso — Fri, 31 Mar 2023 08:20:17 GMT

Hello there!

I'm a developer, new to HubSpot. I'm trying to follow this article: https://developers.hubspot.com/docs/cms/building-blocks/themes/custom-fonts to add a custom font to my "test-theme". I cannot get the font to populate as an option from the dropdown in the Theme Settings > Global Fonts.

Could anyone review my theme structure, theme.json, fonts/ and let me know how I can correct this?

theme.jsondesign manager

Thank you!

Re: Configuring a Custom Font to set in Theme Settings

Jaycee_Lewis — Mon, 03 Apr 2023 18:02:32 GMT

Hi, @ndickiso 👋 Thanks for reaching out. We're you able to get this working?

Best,

Jaycee

Re: Configuring a Custom Font to set in Theme Settings

ndickiso — Wed, 05 Apr 2023 14:06:24 GMT

Hi @Jaycee_Lewis! No, I have not. Can you help 😀?

Re: Configuring a Custom Font to set in Theme Settings

r_levine — Wed, 16 Aug 2023 14:08:33 GMT

Hi @ndickiso. I'm a little late to the game, and you've hopefully already found a solution, but I believe there are two issues.

Change your file name from 'fonts.json' to 'font.json' (remove the 's' in fonts)

In your 'theme.json' file replace

"custom_fonts": [ "./fonts/AzoSans2" ],

with

  "fonts": {
    "label" : "Azo Sans 2",
    "custom_fonts": [ "./fonts/AzoSans2"]
  },

I hope that helps!

Re: Configuring a Custom Font to set in Theme Settings

lolcabanon — Sat, 30 Sep 2023 16:42:18 GMT

Hey! I think I just figured out how to make it work!

1. As suggested by r_levine you should rename fonts.json to font.json

2. Put the font.json file inside your AzoSans2 folder (one font.json file per font)

3. In theme.json file, add

"custom_fonts": [
  "./fonts/AzoSans2"
 ]

as expected. It will then discover the font.json file inside the directory.

4. In the fields.json file of the theme (the one in the root of the theme folder), find your font object and then set the default object to

"default": {
  "fallback": "arial, sans-serif",
  "font": "Azo Sans 2",
  "font_set": "CUSTOM"
}

I was kinda lucky with the

"font_set": "CUSTOM"

property as I did not find it anywhere but guessed it!

Hope it helped, and maybe report the issue in the article you linked in your original post so the missing info is added to the doc.

Hope it helped 🙂

Re: Configuring a Custom Font to set in Theme Settings

EdCupaioli — Mon, 15 Jul 2024 23:32:08 GMT

If I'm understanding correctly from @r_levine and@lolcabanon answers, the documentation is not correct and if you were to say spend over 2 hours writing json and creating directories and double checking all of your code, it won't work? Jokes aside, that documentation is incorrect, incomplete or both. Docs are supposed to eliminate guesswork, not create it so I hope they correct them.

My aim was to make the custom font available for CTAs. What actually worked for me was adding a font field on my theme's field.json file, then uploading each font.