Button Custom Font

Add these codes to CSS Custom Box and click Save.

  • You need to keep #1 code in top of Custom CSS box, this code will load Custom Font File.
  • Replace Font file URL in the code with your custom font file url
  • Replace Velour-Light with font name what you want

 

#1. Read First

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

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

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

Quick View

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

Continue Shopping

/* 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;
}