Custom font needed on product page

Custom font needed on product page

bnbrown88
Excursionist
40 0 9

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
488 40 91

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.


Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
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
Excursionist
40 0 9

Yes, sorry collection page 

Arif_Shopidevs
Shopify Partner
488 40 91

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.

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
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
488 40 91

 

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>

 

 

Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
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.