Gallery image title - need to change font

https://www.thejanimalstore.com/childrens-book-illustrations

I want to change the font on the titles under each gallery image. Is there code that can fix this issue? SqSp customer service says it's not possible on the regular settings. 

@are2024  Yes, there is! Try the below and let me know if it works for you. I've included 2 options so that you can control if the change happens across your whole site or just for that one specific gallery.

This code will work for every image slide title:

.image-slide-title {
  font-family: aktiv-grotesk !important}

If you want it only for that one section:

section[data-section-id="661963b5ca5073631dc43b53"] .image-slide-title {
  font-family: aktiv-grotesk !important}

Please note: I'm not sure what font you want the titles to be. You can replace the purple text with the font of your choice. 

13 hours ago, WCS said:

@are2024  Yes, there is! Try the below and let me know if it works for you. I've included 2 options so that you can control if the change happens across your whole site or just for that one specific gallery.

This code will work for every image slide title:

.image-slide-title {
  font-family: aktiv-grotesk !important}

If you want it only for that one section:

section[data-section-id="661963b5ca5073631dc43b53"] .image-slide-title {
  font-family: aktiv-grotesk !important}

Please note: I'm not sure what font you want the titles to be. You can replace the purple text with the font of your choice. 

That didn't work, unfortunately - but!

I discovered there is already a custom font coded into the backend, this may be an issue??

also - I'm basically trying to rebrand a few pages to create a faux second website - so I want the font different on a specific page or 4. Is it possible to code a custom font into just a few pages? or use a default font on a few pages instead of the css font?

here is the pre-existing code if that helps - 

@font-face {
    font-family: MrsEavesOT-Roman;
       src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf);

  }

h1 {font-family: MrsEavesOT-Roman;}
h2 {font-family: MrsEavesOT-Roman;}
h3 {font-family: MrsEavesOT-Roman;}
h4 {font-family: MrsEavesOT-Roman;}
p {font-family: MrsEavesOT-Roman;}
.header-title a {
  font-family: MrsEavesOT-Roman !important;
}

.header-nav-item a {
  font-family: MrsEavesOT-Roman !important;
}
time.summary-metadata-item.summary-metadata-item--date {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-title-link {
    font-family: MrsEavesOT-Roman !important;
}
a.summary-read-more-link {
    font-family: MrsEavesOT-Roman !important;
}
.sqs-add-to-cart-button-inner {
  font-family: MrsEavesOT-Roman ;
}
.header--menu-open a {font-family: MrsEavesOT-Roman}
.collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status {
  font-family: MrsEavesOT-Roman !important;
}
.blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;}
.item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;}
.blog-item-title h1.entry-title {
    font-family: MrsEavesOT-Roman !important;
}
#siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element {
    font-family: MrsEavesOT-Roman !important;
}

a.nested-category-breadcrumb-link {
    font-family: MrsEavesOT-Roman !important;
}

/* Category product */
.products.collection-content-wrapper .nested-category-tree-wrapper .category-link {
    font-family: 'MrsEavesOT-Roman' !important;
}
/* add to cart */
.sqs-add-to-cart-button-inner {
    font-family: 'MrsEavesOT-Roman' !important;
}

/* Product Detail - Description */
section.product-details.ProductItem-details * {
    font-family: MrsEavesOT-Roman !important;
}

.collection-type-products .ProductItem-details .product-price,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children

  {
  
    font-family : MrsEavesOT-Roman;
    
    }
.newsletter-block .newsletter-form-header-title {
  font-family: MrsEavesOT-Roman !important;
}
/* Cart page custom font */
div#sqs-cart-container * {
    font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important;
}
/* Promotional popup custom font */
.sqs-popup-overlay-content * {
    font-family: MrsEavesOT-Roman !important;
}
// Newsletter Form Description //
.newsletter-block .newsletter-form-header-description p {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Fields //
.newsletter-block .newsletter-form-field-element {
  font-family: MrsEavesOT-Roman !important;
}

// Newsletter Form Button //
.newsletter-block .newsletter-form-button {
  font-family: MrsEavesOT-Roman !important;
}

.variant-option * {
    font-family: MrsEavesOT-Roman !important;
}
// For the Form
.sqs-block-form .field-list .title,
.sqs-block-form .field-list .caption,
.form-wrapper .field-list .field .field-element,
.sqs-block-form .field-list select,
.form-wrapper .field-list textarea,
body:not(.button-style-default) .sqs-block-form .sqs-editable-button {
    font-family:  MrsEavesOT-Roman !important;
}
.form-wrapper .field-list .field .caption {
  font-family: MrsEavesOT-Roman;
  font-size: 9px;
  color: white;
  letter-spacing: .15em;
  text-transform: none;
}

.sqs-block-button-element {
box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); 
}

.sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary {
    box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75);
}

/* change the variant button style */
.variant-option .sqs-button-element--secondary {
  background:#F0A166!important; /* change the button background color */
  border: 2px solid #EF8345!important; /* change the button border */
  font-size: 1.2rem!important;/* change the button font size */
  text-transform: uppercase;/* change the button character style */

}

/* change the button on a hover */
.variant-option .sqs-button-element--secondary:hover {
  background:#4E7C72!important; /* change the button background color */
  color: #EF8345!important; /* change the font color */
  box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */
}

/* change the selected button style */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { 
  background: #4E7C72 !important;/* change the button background color */ 
  color: #F0A166 !important;/* change the button font color */
  border: 1px solid black !important; /* change the button border */
  border-radius: 8rem !important; /* change the button shape */
}

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

/* stack mobile breadcrumb nav links */
@media only screen and (max-width:767px) {
  .nested-category-tree-wrapper>ul {
    flex-direction: column;
  }
}

html {
  scroll-behavior: smooth !important;
}

#myBtn {
   width: 50px;
   height: 50px;
   display: none;
   position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
   border: none;
   outline: none;
   font-size: 25px !important;
   color: white;
   cursor: pointer;
   padding: 10px 10px 10px 11px;
   border-radius: 50%;
   box-shadow: 1px 1px 5px #000;
   /* Change the hex code in the next line to change background color */
   background-color: #a4a4a4;
}

#myBtn:hover {
   background-color: #aeaeae;
}

.ProductItem-details .ProductItem-details-checkout {
    display: flex;
}
.ProductItem-details-excerpt {
    order: 1 !important;
}
.ProductItem-product-price {
    order: 2 !important;
}

@media screen and (max-width:767px) { .products .list-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    display:grid;
    grid-column-gap:12px;
    grid-row-gap:12px;
}}

13 hours ago, WCS said:

@are2024  Yes, there is! Try the below and let me know if it works for you. I've included 2 options so that you can control if the change happens across your whole site or just for that one specific gallery.

This code will work for every image slide title:

.image-slide-title {
  font-family: aktiv-grotesk !important}

If you want it only for that one section:

section[data-section-id="661963b5ca5073631dc43b53"] .image-slide-title {
  font-family: aktiv-grotesk !important}

Please note: I'm not sure what font you want the titles to be. You can replace the purple text with the font of your choice. 

ok! NM! I was able to get it to fit within the pre-existing code, just had to place it better and it worked.

I've made a separate post about the other issue with the page font change. Thanks for your help!  

Hi I'm looking for the same thing where I need to change the font for the image titles in this one particular gallery, and I'd like the text to wrap to the next line if it doesn't fit in one line.  I attached a screenshot with notes to clarify.  Website page is: https://www.bruddersbooks.com/ and just scroll down a bit where you'll see the part in my screenshot.  Thank you for your help!

On 6/30/2024 at 2:31 AM, Kristin_Leigh said:

Hi I'm looking for the same thing where I need to change the font for the image titles in this one particular gallery, and I'd like the text to wrap to the next line if it doesn't fit in one line.  I attached a screenshot with notes to clarify.  Website page is: https://www.bruddersbooks.com/ and just scroll down a bit where you'll see the part in my screenshot.  Thank you for your help!

You can use this code to Custom CSS box

div.image-slide-title {
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: initial !important;
    font-family: 'Chelsea Market' !important;
}