[Share code] Button Custom Font

Some code to apply custom font on buttons.

First, you need to upload font file to your site (You can upload it via Custom CSS box, it has an option to upload file).

Next, add this code to top of Custom CSS box

@font-face {
    font-family: Velour-Light;
    src: url(https://static1.squarespace.com/static/5f8bfea35dbfc628ea43cb78/t/650ba7dd3f0d8054c231bda6/1695262686319/Velour+Light.otf)
}

Replace example url with your font file url

Replace Velour-Light with font name what you want

And then, to apply this font to buttons, you can use these following code

Header Button

/* Header button font */
a.btn {
    font-family: Velour-Light !important;
}

Button Block

/* Button Block */
div.button-block a {
    font-family: Velour-Light !important;
}

List Section Button (Simple Grid, Carousel, Banner Slideshow)

/* List section button - list section item button */
a.list-item-content__button, a.list-section-button {
    font-family: Velour-Light !important;
}

Add to Cart button

/* Add to cart */
.sqs-add-to-cart-button-inner {
    font-family: Velour-Light !important;
}

Quick View button

/* Product Quick view button */
span.sqs-product-quick-view-button {
    font-family: Velour-Light !important;
}

Continue Shopping button

/* Continue shopping button */
a.cart-continue-button {
    font-family: Velour-Light !important;
}

Checkout button

/* Checkout button */
button.cart-checkout-button {
    font-family: Velour-Light !important;
}

Form block button

/* Form block button */
input.button {
    font-family: Velour-Light !important;
}

Form lightbox button

/* Form Block Lightbox button */
button.lightbox-handle {
    font-family: Velour-Light !important;
}

Newsletter button

/* Newsletter block button */
span.newsletter-form-button-label {
    font-family: Velour-Light !important;
}

Donation Block button

/* Donation block button */
div.sqs-donate-button {
    font-family: Velour-Light !important;
}

If you have any questions, just comment below with site url, I can help easier

Hi Tuan! 

I tried using the Quick View button code for my products but it doesn't seem to be working? https://www.elisasunga.com/recipes

/* Product Quick view button */
span.sqs-product-quick-view-button {
font-family: Public Sans !important;
text-size: 12pm !important;
}

I would like to adjust the text/font in the button so that the "Download" appears as one line?

7 hours ago, elisasunga said:

Hi Tuan! 

I tried using the Quick View button code for my products but it doesn't seem to be working? https://www.elisasunga.com/recipes

/* Product Quick view button */
span.sqs-product-quick-view-button {
font-family: Public Sans !important;
text-size: 12pm !important;
}

 

I would like to adjust the text/font in the button so that the "Download" appears as one line?

 

You can use this CSS code

div.lightbox-inner .sqs-add-to-cart-button-inner {
    font-family: 'Cardo' !important;
    white-space: nowrap;
}
div.lightbox-inner .ProductItem-details .sqs-add-to-cart-button-wrapper {
    width: auto !important;
}