Jump to content

Changing font in product page

Recommended Posts

  • Replies 8
  • Views 529
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

57 minutes ago, primeglobalfitness said:

How do you change the font of the add to cart button and product page in general? 

Thank you in advance 

5820CA9C-3C38-4E02-83BD-547A830C90BF.thumb.jpeg.09f4ee707748d07869e394f0b6c8fd71.jpeg

Can you share your site with the protected password so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace (+100 Spark plugin customisations)
🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment
29 minutes ago, primeglobalfitness said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  /*Add to card style on mobile*/
  .sqs-add-to-cart-button-inner {
    font-family: arial; /*font name*/
    font-size: 20px; /*size of text*/
  }

  /*Title of variant*/
  .variant-option-title {
    font-size: 20px;
  }

  /*Quantity label*/
  .quantity-label {
    font-size: 20px;
  }

  /*style for flavour dropdown*/
  .product-details .variant-select-wrapper:before {
    font-size: 20px;
  }
  .variant-select-wrapper[data-text="Select Flavour"] {
    display: flex;
    justify-content:center;
    align-items: center;
  }

  .product-details .variant-select-wrapper:after {
    height: 0.5rem;
    width: 0.5rem;
  }
}

 

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace (+100 Spark plugin customisations)
🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

You can try my above code again

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace (+100 Spark plugin customisations)
🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

You can use the font-family as I shared before

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace (+100 Spark plugin customisations)
🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.