Avenue: How to change gallery font?

Hi!

I'm trying to change the font for the gallery image captions in the Avenue template. Right now they are set to the body style; I'd like to use the Heading 3 style instead. Can anyone help? Thank you!

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

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.)

Can anyone help? Thank you!

15 minutes ago, cakalak said:

Can anyone help? Thank you!

Can you share link to your site?

Hi @tuanphan,

https://www.lawrence.kim/

I'd like to change "Financial", "Educational", "Publishing", etc. to the H3 style. Currently these titles are in the body style.

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.

Thank you @christyprice!

@christyprice It worked perfectly in Basil! Thank you!!

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

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.

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!

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!

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