Shopping cart & Checkout page custom font style & size

Site URL: http://essentialsbymhd.com

Hi,

Is there a way to add a custom font style & size to my shopping cart page (Title, product name, etc.) as well as my checkout page (Store logo size, custom font & sizes for the whole page) I tried to add a css found online but none of them works. I was able to custom my font style and size for almost everything on my website except these two pages. Please help me figure that out!

Thank you,

Natalie 

You won't be able to change the checkout. All Squarespace checkouts must use Squarespace's own font - Clarkson. 

You can change the Cart page, but as Squarespace changed many of the classes on this page last week, most of the solutions you find online will be out of date. 

Would you be able to get me a css solution for the cart page

It worked! Can you also teach me how to change the font size? Thank you so much

7 hours ago, Essentialsbymhd said:

Can you also teach me how to change the font size?

Add something like this before the final curly brace:

font-size: 1.3em;

Hi,

I don't know why but everything worked except my item title & checkout Button. Bellow is my css code, let me know what went wrong

.cart-title, .cart-item-list-labels, .item-desc, .variant-name, .item-quantity, .item-price, .vP_HqHxwY, .TPEfWzjos, .sqs-editable-button KD_Juh_j6 checkout-button, {
  font-size: 1em !important;
}

You had some syntax errors and incorrect selectors.

Try the following.

// alter cart, uses LESS syntax

#cart {

  .cart-item-list-labels,
  .cart-title,
  .item-desc a,
  .item-price,
  .item-quantity,
  .checkout-button,
  .variant-name,
  .vP_HqHxwY
  
    {
    
      font-size : 1em;
      
      }
      
  }

I'm using a little bit of LESS syntax to save on typing of #cart over and over again. Adding #cart makes sure that other parts of your site aren't unexpectedly altered.

After LESS processes the input it looks like the following.

#cart .cart-item-list-labels,
#cart .cart-title,
#cart .item-desc a,
#cart .item-price,
#cart .item-quantity,
#cart .checkout-button,
#cart .variant-name,
#cart .vP_HqHxwY {
  font-size: 1em;
}

Let us know how it goes.

It still doesn't work 😞

Quote

It still doesn't work 

Did you provide a site-wide password to us? I didn't see one. We need to see your cart page.

essentialsbymhd.com

password is essentials

I have updated my code post. Here is what I'm seeing when I apply the code to your site locally.

Hi,

I tried the code again and it works! 

Thanks you so much!

I have another question. I tried to change the font for the pricing shown in my product list but it doesn't seem to work. The title of the product worked but not the pricing.

Quote

I tried to change the font for the pricing shown in my product list but it doesn't seem to work.

You can target the titles and prices with the following selectors.

.collection-type-products .grid-title

.collection-type-products .grid-prices

You're awesome! Thank you so much!!!!❤️

Hello everyone, I have been trying to change the font and design of my shopping cart and checkout page but it doesn't work. I found this thread and try to follow your instructions but when I right click "view source" doesn't come up? Would appreciate some help!

15 hours ago, JiaDeLara said:

I have been trying to change the font and design of my checkout page but it doesn't work.

The checkout page can not be changed. It is an SS security feature.

Quote

when I right click "view source" doesn't come up?

I don't have an answer for this one.