CMS Development

colaboratory
Membro

CTA font not loading on mobile

resolver

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 Avaliação positiva
1 Solução aceita
colaboratory
Solução
Membro

CTA font not loading on mobile

resolver

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;

Exibir solução no post original

2 Respostas 2
colaboratory
Solução
Membro

CTA font not loading on mobile

resolver

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
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

CTA font not loading on mobile

resolver

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.