CTA font not loading on mobile

[colaboratory]

I'm working on a site for a client and noticed that the custom font (named CircularXX) on my CTA buttons aren't loading on mobile, but they appear fine on desktop.

The site is built using the Clean Theme 6.1 with modified/customized modules to suit my client's needs.

Here's what the buttons should look like:

Here's what they look like on mobile:

A few things to note:

• I've defined these buttons using the module built into the theme for defining CTA button styles
• On top of that, I have CSS overrides for each CTA to apply the proper radius, padding, and ensure that the font loads properly (at least on desktop)

[colaboratory · Accepted solution]

Awesome, that worked!

I actually already had it set to:

font-family: CircularXX,

But adding the sans-serif seemed to fix it:

font-family: CircularXX, sans-serif;

[webdew]

Hi @colaboratory ,

 For these issues, you can add the font family in CTA CSS, and if you are using the custom fonts then you have to add the CSS in cta. 

Refer this doc :- https://knowledge.hubspot.com/cos-general/how-do-i-add-google-fonts-to-my-new-landing-pages#add-your...

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.