Custom Font not appearing on quantity selectors and buttons

Shopify Discussion

Topic summary

A user is experiencing font display issues in the Shopify Dawn theme where custom fonts aren’t applying to quantity selectors, despite working correctly on the “Add to cart” button.

Problem Details:

  • Custom fonts display correctly on some elements (e.g., red “Add to cart” button)
  • Quantity selector shows incorrect font and style
  • Multiple attempted solutions have failed
  • Issue appears to stem from default theme styles overriding custom font settings for form elements

Proposed Solution:
A responder suggested adding CSS code to directly target quantity input fields:

  • Target .product-form__input input[type="number"] and .quantity__input
  • Apply custom font with !important flag to override defaults
  • Add code to base.css or theme.css via Theme Editor

Alternatively, the responder offered to implement a custom feature allowing unlimited font uploads with broader application control, requiring store URL and collaborator access.

Status: Awaiting user response on whether the CSS solution resolves the issue.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I’m currently working on a new design for our website. I’m using the Shopify Dawn theme and have incorporated two custom fonts to use throughout the website. For whatever reason, the fonts are not appearing in certain areas.

One example is the quantity selector. I have tried numerous different methods and nothing seems to work in trying to change the font.

Please see the photo below for reference. The Red “Add to cart” Button has the correct custom font, but the quantity selector above it is both the incorrect font and style.

Screenshot 2025-06-06 140245.png
Screenshot 2025-06-06 140245.png360×273 8.32 KB

2

@StokedOats ,

To make your custom fonts apply to areas like the quantity selector in the Shopify Dawn theme, you’ll need to directly target those input fields via CSS. The default theme styles often override font settings for form elements.

Add this code:

css

CopyEdit

.product-form__input input[type=“number”], .quantity__input { font-family: ‘YourCustomFontName’, sans-serif !important; font-weight: normal !important; }

 

Replace ‘YourCustomFontName’ with your actual font name.### Where to place it:- Go to Online Store > Themes > Edit Code

  • Open your base.css or theme.css and paste the code in file

This should apply your custom font to the quantity selector and similar input fields.

Or I can fix it with my method — I’ll add a custom feature to your Shopify theme so you can upload unlimited fonts and apply them anywhere you want. That would require detailed code updates.

Let me know your store URL and collaborator request code if you’d prefer I take care of it.

If it resolves your issue, please mark my answer as a solution.