Jump to content

Set different font for customised CSS photo grid caption than site paragraph default

Recommended Posts

I'm looking for some help to change the font of my customised photo grid captions. I currently have the following code for my homepage photo grid gallery which uses an overlayed caption that fades in and out on mouse hover. Please feel free to visit my site to see it in action. I'm looking to set a different font for the captions on this grid. My sit paragraph 2 front is currently set to "Bebas Neue" which is also my paragraph 1 and site title. However, I want my paragraph 2 font to be a simple Adobe font such as Adobe Calson Pro or a similar easy-to-read font. But I wish for my paragraph 2 text on my caption overlay on the homepage to remain as Bebas Neue to stay consistent with my brand. I'm unsure how to make this work as I'm still quite new to learning CSS code. Any help would be appreciated, this is my current code for this section:

@media screen and (max-width:767px) {
div.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}}

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center caption box vertically 
  justify-content: center; // center caption box horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 1rem !important; // caption font size
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
  text-align: center; // center text within caption box
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}

Link to comment
  • Replies 1
  • Views 176
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

@Jonathangreenphotos Begin by uploading and setting the font on Squarespace using this tutorial: https://kayleighnoele.com/blog/how-to-upload-a-custom-font-to-squarespace

After that, you can add the following code into the Custom CSS panel in your Squarespace editor to change the font of the paragraph 2 text:

p:not(.sqsrte-large):not(.sqsrte-small) {
  font-family: 'replace-with-your-font-name' !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.