CTA font not loading on mobile

SOLVE
colaboratory
Member

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:

 

Screen Shot 2021-04-13 at 11.34.27 PM.pngScreen Shot 2021-04-13 at 11.34.35 PM.png

 

Here's what they look like on mobile:

 

IMG_3940.PNGIMG_3938.PNG

 

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)
0 Upvotes
1 Accepted solution

Accepted Solutions
colaboratory
Solution
Member

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;

View solution in original post

2 Replies 2
webdew
Top Contributor | Diamond Partner

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.

colaboratory
Solution
Member

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;

View solution in original post