Changing font designs for a specific section

[Pyimk]

Hello, I am using Craft Theme.
I am trying to change font design from a specific section. I would like to test Arial font.

The sections i want to change is Rich text, Multicolumn and especially the font style for the product name.
Please explain step by step. Thanks

[Sweans · Accepted solution]

Hi @Pyimk ,

Add this code for change font family in product page too

.inline-richtext {

    font-family: Arial !important;

}

If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Liquid_xPert_SJ]

@Pyimk 

you need to upload or link the font you want in the theme.liquid file or the style sheet file. after that you need to target the section class or ID and then target the title and assign font family to that section.

Thanks

[BSSCommerce-B2B]

HI @Pyimk ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css, theme.css, styles.css or theme.scss.liquid (depend on your theme). And add this code snippet to the end of the file.

.rich-text {
  font-family: Arial, sans-serif !important;
}
.multicolumn-list {
  font-family: Arial, sans-serif !important;
}
.product-title {
  font-family: Arial, sans-serif !important;
}

In this step, you chose font-family to sections as you want to change font: rich text, multicolumn, product-title.

Step 3: Save your code and reload this page.

By following these steps, you should be able to change the font design for the specified sections in the Craft theme.

If not, Can you kindly share your store link (with the password, if any) and share the details of your problem (screenshot/ record) with us?

We will check it and suggest you a solution if possible.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Pyimk]

It is not working.
Here is the store link.
https://findla.co/
The Rich Text font is not only for home page but also for other pages such as product pages.

[BSSCommerce-B2B]

Hi @Pyimk ,

I have checked your website,

In addition to using the rich-text classes, you are also using inline-richtext classes.

The product titles are currently using the CSS of the <h1> tag.

Therefore, I have made some adjustments to the CSS. You can try changing the code like this:

.rich-text, inline-richtext {
  font-family: Arial, sans-serif !important;
}
.multicolumn-list {
  font-family: Arial, sans-serif !important;
}
.product-title h1 {
  font-family: Arial, sans-serif !important;
}

Save this code, and result will be: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

[Pyimk]

I have copied and paste the code but i doesn't see any changes.

[BSSCommerce-B2B · Accepted solution]

Hi @Pyimk , 

You can add the script in base.css: 

.rich-text, .inline-richtext {
  font-family: Arial !important;
}
.multicolumn-list {
  font-family: Arial !important;
}
.product__title h1 {
    font-family: Arial !important;
}
.card__heading a {
    font-family: Arial !important;
}

The result after I change it on inspect view: 

#font design of featured collection to Arial: 

#Product page title: 

Hope it helps! 

[Sweans]

Hi @Pyimk ,

To change font size

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find the Craft theme and click on Customize.

4.click Actions > Edit code.

In the left sidebar, under the layout directory, click base.css

paste the code and save

/* Multicolumn Section */

.multicolumn-list h3,

.multicolumn-list p {

    font-family: Arial !important;

}

/* Rich Text Section */

.rich-text h2,

.rich-text p {

    font-family: Arial !important;

}

/* Product Name */

.product__title {

    font-family: Arial !important;

}

I hope this helps! If not, please provide url of website.

If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Pyimk]

I think Rich text is working.
For multicolumn,( the main header?) is not working
The product font style doesn't change too.

Here is the store link.
https://findla.co/

[Sweans · Accepted solution]

Hi @Pyimk ,

Add this code for change font family in product page too

.inline-richtext {

    font-family: Arial !important;

}

If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Pyimk]

Everything is working expect the product name in Product pages.
I would also appreciate it if you could help me change the font design of featured collection to Arial too.