change font on Buy it now button - Dawn

Store Design
1

Hi there,

I used below code to alter the font on the “buy it now” button my product page but I can’t get it to work. The same code does work for other elements on the page, so I’m thinking it has to do with the first part. I first added ‘display: none’ to see if I’m working with the right class which seems to be the case, but maybe I need to point to the text within the button?

Any help would be greatly appreciated!

.shopify-payment-button__button {
  font-family: "Quattrocento Sans" !important;
}

Website (any product page)

password: waiheke

2

Hey @INFRA ,

Here’s what might be going on, and how to fix it:

Problem Breakdown

You wrote this CSS:

.shopify-payment-button__button {
  font-family: "Quattrocento Sans" !important;
}

And here’s the button’s HTML:

The issue here is:

  • The style=“font-family: Quattrocento sans-serif;” on the inline style is overriding your CSS.

  • Even your !important isn’t winning — inline styles are stronger than external stylesheets, unless you use !important in the inline itself, which we can’t do dynamically via CSS.

You’ll need to override the inline style with JavaScript, because CSS can’t override inline styles if the same property is declared inline.

Here’s how you can do it:

Option 1: JavaScript fix (best option for dynamic buttons)

Option 2: Remove inline styles with JavaScript (less safe)

buyNowBtn.removeAttribute("style");

…but I don’t recommend that unless you’re sure there are no other important inline styles that Shopify might be injecting.

Let me know if you want to scope this only to specific products or pages, or if you want to make it work in a Shopify 2.0 section-based theme!

If you want help to implement this properly please feel free to reach out!

Best Regards

Rajat

Shopify Expert

1 Like
3

Hi, thanks so much for taking the time to explain!

I added the script to my theme liquid, above the /body tag but with no result. Should I add it somewhere else instead? Thanks!

4

@INFRA ,

Use this JavaScript with a delay to override the inline style

Add this to your theme.liquid, just before the tag:

This ensures your custom font is applied even if Shopify adds the button with inline styles after the page loads.

5

This one didn’t work either :disappointed_face:

6

No worries at all I’ll be happy to take a closer look for you! If you’d like, you can share store access with me so I can implement it directly. Feel free to send me the Collaborator access code along with your store URL to my email — I’ll take care of it for you. Thanks!