When you use the brandkit or theme font.json to add a custom font (using the correct method to add font variants)
Rich Text editors no longer allow you to choose bold or italic
You have to click on the font drop down then click on brand kit or custom font (both seem to appear even if only 1 is set but this is a seperate issue)
Then Click your font, and then choose the font variation.
This is very bad UX considerring previously I could just press cmd+B or cmd+i
Before we added it as a font.json or brandkit font, It was just a CSS font and the client could ignore the font dropdown completely and just use Bold and Italic as expected with the B and I buttons
Hi @matt_scott
Thanks for posting! I want to share a couple of resources for your same issue:
And these Community Thread that offers helpful context
https://community.hubspot.com/t5/CMS-Development/Can-t-understand-how-custom-fonts-work/td-p/754405
Also, I’m tagging a few experts who can help us out here. Hey there, @JWingate2 , @Anton , and @TomM2 . I hope you’re having a great week! Any insights here?
Thanks
Victor
These threads all seem to just explain about different font weights.
I know all this, my clients don’t care, my clients want a bold button
I don’t want font weights. I want my clients to have a bold button they can use because that’s what they use in word and google docs and emails.
This is a bug that needs fixing!
Hey @matt_scott,
fully agree that the curent custom font solutions aren’t that great in terms of UX.
Something I do, if the customer has very specific and non Google Fonts is:
- uploading the fonts to the File-manager (not Design-Manager) into a dedicated folder like brand/fonts
- copying the individual font URL
- setting up @font-face rules in the CSS (if you’re working with a marketplace theme, you need to create a child-theme of it first)
- setting up the styles and different font usages via CSS
- disabling the default rich-text in the (child-) theme settings
- creating a custom rich-text module without the font dropdowns
Hope this helps
edit: As you read this - I’m still using the CSS approach rather than font.json or brandkit… It’s just much cleaner and less “let the user handle it”
best,
Anton
Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.
Hi Anton,
Thanks for the suggestion.
I actually already do all that, everything was fine and the I added the font to the brandkit so it could be used in some other assets, but now it’s in the brandkit, it auto loads in my theme and disables the bold button.
So basically it was working fine and they just left the font default, but now I added it to brand kit, it broke it.
Hi @matt_scott, Thanks again for your post and comments!
I’m sorry for the frustration this is causing. I’m getting in the touch with the Product Team to help find a solution as soon as posible and get back to you soon. Thank you for your patience!
Victor, Community Team
Hey @matt_scott, thank you so much for your patience!
I checked in with the PM team to make sure I pointed you in the right direction. The best next step would be to file a Support Ticket so the team can help you directly with your specific use case.
I know that’s an extra step, but they’ll be able to access your account details and provide direct assistance there.
Please let me know if you have any more questions
Thanks
Victor