Apply font to certain section

[INFRA]

Hi there,

I would like to apply our google ‘Space Mono’ font to the below tracklist (in pink rectangle). Is is possible to apply this to all similar sections throughout the website? All product page templates have a similar list that we want in this font.

Thanks so much!

website

product page template example

password: chaos

[websensepro]

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

section.product-section.section.section-y-padding.bg-scheme-background.text-scheme-text .my-8.ml-14 {
    font-family: "Space Mono", serif !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[topnewyork]

Hi @INFRA

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

[Moeed]

Hey @INFRA

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:

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

Best Regards,
Moeed

[EstherBui]

Hi @INFRA , thanks for reaching out.

To address the issue, please help me go to your Theme => Online store => Customize => Theme settings => Custom CSS and insert the following custom code:

button.block.text-left {
    font-family: 'Space Mono';
}

You can take a look at the expected result here:

I hope my solution is helpful to you, and please feel free to feedback.

Esther

[DaisyVo]

Hi @INFRA

Please follow these steps to fulfill your request

2. To add the code before , follow these steps:

• Open your theme’s HTML file (likely theme.liquid or equivalent).
• Insert the following code right before the closing tag:

2. To apply the custom CSS, you need to add the following code into your theme’s custom CSS section (usually found in the “Assets” folder, inside styles.css or theme.css):

h1.product-title + .rte.product-rte.text-rte + .my-8.rte + template + .my-8.ml-14 * {
    font-family: "Space Mono", serif !important;
}

I hope this helps

Best,

Tiana

[INFRA]

worked perfectly, thanks so much!