Adding Custom Fonts to Image Layout Block

Hey Guys,

I am really stuck with adding custom fonts to some image Layout Blocks that I have added to my page and hoping for some help.

I have been using custom CSS code to add the custom fonts, however, I am then unable to apply this font to the image layout block header font. I have tried using the following code:

.sqs-block-image .image-caption p { font-family: Butler;}

which unfortunately has not worked.

Any advice would be greatly appreciated!

Thanks,Su

@SuzyO Can you share site url?

or try: font-family: Butler !important;

@tuanphanThank you for your message! Do you mean the link to my website? If so this has not been made live yet, since I want to try and get the desired look of it first - which I am unable to do at the moment.

As for the code you attached, it unfortunately is still not working.

@swanson456 omgash this worked perfectly! Thanks so much for your help!

The Post Is A Written In A Very Good Way For You. I Appreciated What You Have Done here. I am always searching for informative information like this.

Thank you for providing these details.

Great Post !

@swanson456 

Hi thanks for your comment I'm trying to apply it on my site to change the text on an image block in a poster layout and I'm not getting any luck. 

Wondered if you may be able to help, would be much appreciated!  🙂

In my custom CSS I have put the following:

@font-face { font-family: "WANDERLUST";   
src: url(https://static1.squarespace.com/static/5b293f9a96d455c3cb5c777d/t/5e4b0e6901c72f4e3e5ed4af/1581977193489/Wanderlust.otf;)
}

.sqs-block-image .image-caption p { font-family: "WANDERLUST";}

Image Block Poster Custom Font.sqs-block-image .design-layout-poster .image-card-wrapper p { font-family: "WANDERLUST" !important }

Thanks so much for any help you can offer!!

Hey @gprev,

Did you ever find the solution for this?

I'm trying to do the same for three different image blocks: card, block and collage. Any help would be greatly appreciated!

Thanks in advance!

This worked but only changed the heading

https://forum.squarespace.com/topic/157318-css-code-for-image-block-collage-title-font/

On 4/7/2020 at 11:46 PM, lloyd_seymour said:

This worked but only changed the heading

https://forum.squarespace.com/topic/157318-css-code-for-image-block-collage-title-font/

Hi guys,

To change the subtitle font, all you have to do is make a little adjustment to Lloyd's code. Try this:

.image-subtitle-wrapper * {
    font-family: Butler !important;
}

Hope that helps.