Jump to content

Avenue: How to change gallery font?

Recommended Posts

Hi @cakalak,

You'd add something like this to Design > Custom CSS. Delete the lines you don't need, and change the font-family, font-size, etc to match your H3.

.project .project-title {
    font-family: "futura-pt" !important;
    font-size: 20px !important;
    line-height: 1.2em !important;
    text-transform: lowercase !important;
    letter-spacing: .02em !important;
     font-weight: 300 !important;
    font-style: normal !important;
    color: #404040 !important;
}

 

Edited by christyprice

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

Thank you, @christyprice! I added the CSS but it didn't do anything. This may be a stupid question but do I have to substitute something for ".project" and ".project-title"?

 

(To clarify, I'm referring to the image titles below each image in my gallery. Please see attached screenshot.)

Screen Shot 2019-11-07 at 8.30.36 PM.png

Edited by cakalak
Added more info
Link to comment

Thanks for the link. I had assumed you were using the Project blocks in Avenue and wanting to change those titles. For the way you have it set up, using a gallery grid, you'd need to use code like this, added to Design > Custom CSS: 

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    font-family: futura-pt !important;
    font-size: 20px !important;
    line-height: 1.2em !important;
    text-transform: none !important;
    letter-spacing: .02em !important;
     font-weight: 300 !important;
    font-style: normal !important;
    color: #404040 !important;
}

You'll need to change out the values to match your H3. Since I didn't see it used on your site, I can't see what values you are using, so just replace the sizes and colors with whatever you want.

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 1 month later...
  • 8 months later...
10 hours ago, christineseed said:

Is there a way to modify this code so that the titles don't get cut off, but instead go to a second line?

Can you share gallery page url? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 11/11/2019 at 10:23 AM, christyprice said:

Thanks for the link. I had assumed you were using the Project blocks in Avenue and wanting to change those titles. For the way you have it set up, using a gallery grid, you'd need to use code like this, added to Design > Custom CSS: 

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    font-family: futura-pt !important;
    font-size: 20px !important;
    line-height: 1.2em !important;
    text-transform: none !important;
    letter-spacing: .02em !important;
     font-weight: 300 !important;
    font-style: normal !important;
    color: #404040 !important;
}

You'll need to change out the values to match your H3. Since I didn't see it used on your site, I can't see what values you are using, so just replace the sizes and colors with whatever you want.

Hi I know this post is from a few years ago, but I just wanted to say thank you because this code helped me to customize my gallery titles without changing the body text! I was spending hours trying to figure it out and this code worked!

Link to comment
  • 1 year later...
On 5/4/2023 at 10:24 PM, CKW_242 said:

How do I change the gallery description font to a custom font I have uploaded already? Tried the codes above but it didn't work. Trying to change it to Barlow font.

 

Link: https://elevatesportsventures.com/

I am referring to the section under client spotlight that currently uses the font Merriweather!

Add to Design > Custom CSS

.gallery-caption p.gallery-caption-content {
    font-family: 'Barlow' !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.