Custom font needed on product page

Custom font needed on product page

bnbrown88
Tourist
15 0 7

Want to change font type and size specifically on my product page. (photo for reference)

IMG_2366.png

 

Replies 4 (4)

Arif_Shopidevs
Shopify Partner
263 37 36

Hello, You want product page or collection page. Your screen shot show collection page.
If you want product page 

Step 1: Navigate to your Shopify admin panel and go to "Online Store."

Step 2: Click on "Themes" and then select  Edit code

Step 3:  sections/main-product.liquid
add top above this code to load google font

 

<link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">
<style type="text/css">
  .product__title h1, 
.product-single__description {
    font-family: 'Stylish', sans-serif; /* Replace 'Roboto' with your chosen font */
}
</style>

 

 

then it will show like 

Arif_Shopidevs_0-1727092757949.png

 like my product page.


Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

bnbrown88
Tourist
15 0 7

Yes, sorry collection page 

Arif_Shopidevs
Shopify Partner
263 37 36

Is that only collection page or will effect in home page also. because card is used all over the site. Is the custom font you upload in your site. Or used other.

Your home page title of product used custom font.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
263 37 36

 

Only for the collection page

Step 1: Navigate to your Shopify admin panel and go to "Online Store."

Step 2: Click on "Themes" and then select  Edit code

Step 3:  sections/main-collection-product-grid.liquid

 



Arif_Shopidevs_0-1727094297976.png

 

<link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">
<style type="text/css">
  .card__heading, 
.product-single__description {
    font-family: 'Stylish', sans-serif; /* Replace 'Roboto' with your chosen font */
}
</style>

 

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers