Does anyone else have an issue where Google Fonts do not load on landing pages?
I noticed that even though a font is selected as a body and primary font in the Brand settings, and selected in the rich text editor on a landing page, the font does not load on the page. I’ve tested this accross multiple browsers.
What’s weird is it does load the font when editing a given rich text block. But after saving and publishing, the font still won’t load.
Image 1: Editing an affected landing page. Rich text with google font applied is not loading. The body is using a fallback font instead.
Image 2: Rich text loads the font immediately after clicking into the rich text editor.
Saving and publishing after this point affects nothing. And checking the page source, all the blocks do have font-family: “Figtree” styling applied. It’s just not loading it. The font download you see in the second image never happens when viewing the published page.
Hey @kyleffotf,
Thanks so much for posting in the Community!
I’m not finding any similar Community threads that outline this issue, so I’d like to tag in a few experts to see what insight they might have. @Kevin-C, @miljkovicmisa, and @nickdeckerdevs1 - are any of you aware of what might be causing this behavior?
Shane, Senior Community Moderator
I guess this isn’t a widespread issue if no one else is mentioning it. Hoping for an answer before the forum locks down for a week.
I am experiencing the same issue. You are not the only one. My AI is telling me to add the google font into the css - if it works I’ll report back here.
Ok, so I put added the line to the top of my child css and then it worked.
@import url(‘https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap’);
That should work (with your font of course).
Hi @threadfactor and thanks so much for sharing this with the HubSpot Community, we really appreciate it!
Glad to see that it seems resolved for all of you! I’ll share it internally for more visibility.
Please let me know if this happens again or if you see something unexpected and I’ll be glad to look into this for you!
Have a lovely day!
Bérangère
Thank you, this solves the immediate issue
@threadfactor’s answer works. With the way the brand settings page is written, there is no indication I need to include an @include statement on my template/stylesheet. It’s implied that Hubspot will take care of that for you after selecting a font through the UI. And yet when you look at the linked knowledgebase, it does tell you to use @include to make the font available. It makes me wonder what the purpose of the brand font setting is.
Not to mention the odd behaviour shown in the screenshots in the original post. This really makes it look like a bug and not intended.
Thanks for flagging this!
We’ll pass this along to our Knowledge Base team to update the documentation so it better explains the relationship between the two. Appreciate you taking the time to share the feedback!
— Cassie, Community Manager
