Issue: A user embedding a Shopify “Add to cart” button on a non‑Shopify site can change colors (button, text, basket) but cannot change the font. They have defined a custom font via CSS (@font-face with font-family: Distraction) but the button text remains the default font.
Recent attempts: The user tried adding a snippet but saw no change and asked where exactly the code should be placed. They offered to share the relevant button code.
Support requests: A helper asked for the site URL and access password (if needed) to inspect, and later requested the CSS class of the button to diagnose targeting.
Technical context: @font-face registers a custom font file, which then must be applied to the target element via CSS selectors (e.g., using font-family on the button or its inner text).
Status/outcome: Unresolved. Next steps depend on the user sharing the website address/password and/or the button’s CSS class or code block so the helper can provide precise placement and selector guidance.
I’m using an Add to Cart button on my own website that is not powered by Shopify. I am able to change the colour of the different features like the button, text and the shopping basket, but I cannot seem to be able to change the font to my own. My page is already using my own imported font -
@font-face {
font-family: Distraction;
src: url(Distraction.ttf);
}
No matter how much I try to change the font, it remains as the standard one.
Hello @EikasDen
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.
Hi,
I tried to incorporate the snippet into the code, but the font remained as default.
Could you tell me exactly where the code should be added? Would you be able to help me if I sent you the code relating to the button?
Would you be able to help me if a sent you a code block relating to the button?
Can you send me the class of this button.