Change custom font on buttons - Dawn theme

Technical Q&A
, ,

Topic summary

A user needed help changing button fonts to a custom font (Futura-SC-T-OT-Book) in their Shopify Dawn theme. Their initial attempt involved adding CSS to the base.css file, but this approach failed to apply the font.

Initial troubleshooting:

  • User tried adding .button { font-family: Futura-SC-T-OT-Book; } with @font-face declaration to base.css
  • Adding !important flag to the CSS rule also didn’t resolve the issue

Working solution:
Instead of modifying CSS files, the solution required adding a <style> block directly to the theme.liquid file, placed above the </body> tag. This approach successfully overrode the default button styling.

Status: Resolved. The user confirmed the solution worked after implementing the theme.liquid modification.

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

Hi there,

Some help would be much appreciated :slightly_smiling_face: I’ve managed to add a custom font to my website - but whatever I try I just can’t seem to change the button font to be correct.

Most recently I’ve tried adding this to the bottom of the base.css file - hoping that by sharing this info someone can tell me what I’m doing incorrectly:

.button {
font-family: Futura-SC-T-OT-Book;
}
@font-face {
font-family: ‘Futura-SC-T-OT-Book_19037’;
src: url(‘Futura-SC-T-OT-Book_19037.woff2’) format(‘woff2’),
url(‘Futura-SC-T-OT-Book_19037.woff2’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

Thanks so much,

Kate

1 Like
2

Hey @kate9

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Thank you

1 Like
4

Hi @kate9 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.button {
    font-family: 'Futura-SC-T-OT-Book', sans-serif !important;
}
5

Hi @CodingFifty - thanks for the reply! I’ve added that to the bottom on the base.css file and it hasn’t changed anything. Please let me know if there is another step that I should try

6

Hey @kate9

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1741524455363.png
Moeed_0-1741524455363.png990×284 22.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

That worked! Thanks so much :slightly_smiling_face:

1 Like
8

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like