Edit home page image banner font

Store Design
, ,

Topic summary

A user wants to change the font of their home page image banner to Playfair Display Bold on their Shopify store.

Initial Solution:

  • Add custom CSS code to the theme.liquid file, placed above the </body> tag
  • The code targets the banner heading and applies the specified font family

Follow-up Request:

  • User asks how to adjust font size so the banner text displays on a single line
  • Notes that changing heading size in the Theme Editor reverts the font back to the original

Updated Solution:

  • A revised CSS code snippet is provided with adjusted font sizing
  • Same implementation method: add to theme.liquid file above </body> tag

Status: The helper provided two iterations of CSS solutions with visual results shown via screenshots. The discussion appears resolved with the updated code addressing both font family and size requirements.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I want to change the font on the image banner located on my home page. The font I want to change it to is Playfair Display Bold (playfair_display_n7).

Please let me know what code is needed and where to place it, thank you!

Website: https://shopkidsplaysets.com/

Font finder: https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#add-shopify-fonts-to-your-theme

2

Hey @amycaslee

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-1723409288242.png
Moeed_0-1723409288242.png1296×895 172 KB

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

Best Regards,
Moeed

3

Hi @Moeed ! Thank you. Can I change the font size to where the text is just one line? If I change the Heading Size in Theme Editor, the font changes back to the old one.

4

Hey @amycaslee

Remove the previous code and add this new code with the same steps mentioned above.

RESULT:

Moeed_0-1723410373806.png
Moeed_0-1723410373806.png1901×945 219 KB

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

Best Regards,
Moeed

1 Like