Buy Now Button font not working on mobile

Store Design
, , ,
1

Hello,

I’m using Buy Now button embeds on a Webflow project. All CSS customization is working fine across all devices except for my custom font (in this case Madera), which works on Desktop but is falling back to the secondary font (in this case Lato) on mobile.

I’ve tried a number of media query adjustments with no success. Has anyone encountered this issue and know of a fix? I can provide more project details if needed.

Thanks.

2

Hello @Cowanski

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

3

The issue is occurring on the product cards. If you click “Buy Now” on the Serrano & Basil card you will see 4 purchase options. The top 2 are the Shopify embeds rendering the fallback font, the bottom 2 are simple Webflow buttons rendering the correct font. As a reminder, the issue does not occur on desktop.

https://bravado-spice-bnb.webflow.io/

4

Hi @Cowanski

We can not access your store, please double-check and share it with us again.

5

sorry, the url has changed to:

https://bravado-spice.webflow.io/

6

sorry, the url has changed to:

https://bravado-spice.webflow.io/

7

Hi @Cowanski

We have checked the buy now button on desktop and phone both iOS, and Android, but we don’t see the font error you mentioned. To be more sure, you can do the following:

  • Turn on F12 to check if the button has the desired font or not:

view (28).png
view (28).png1133×822 137 KB

  • Button has not changed the font, you go to Edit Theme, and search for files in the form of .css or .scss. As we checked, currently your theme is probably using CSS in bravado-spice…css file.

view (29).png
view (29).png882×938 126 KB

  • You go to the theme and search for this file. If you find bravado-spice..css file, then search:
.button-white

Then change it to the following:

font-family: 'Madera', sans-serif !important;
  • If not, you can use another CSS file like theme.css or base.css and add the following CSS code

view (30).png
view (30).png1663×764 39.3 KB

.button-white {
  font-family: 'Madera', sans-serif !important;
}

We hope that this can help you.