Edit home page image banner font

[amycaslee]

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-th... 

[Moeed · Accepted solution]

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 </body> tag

<style>
h2.banner__heading.inline-richtext.h1 {
    font-family: 'Playfair Display' !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Moeed · Accepted solution]

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 </body> tag

<style>
h2.banner__heading.inline-richtext.h1 {
    font-family: 'Playfair Display' !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[amycaslee]

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.

[Moeed · Accepted solution]

Hey @amycaslee 

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

<style>
h2.banner__heading.inline-richtext.h1 {
    font-family: 'Playfair Display' !important;
}
@media screen and (min-width: 768px) {
h2.banner__heading.inline-richtext.h1 {
    font-size: 40px !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed