Jump to content

Changing Font on Image Block Poster

Recommended Posts

Site URL: https://www.waterdragonfabrics.com/

Hi there!

I am trying to create a piece of CSS code to change the font on my gallery image block (poster). The text that's in bold letters on top of the image.
 I have just tried piecing something together but I have not enough knowledge of CSS. Something along the lines of this:

.design-layout-poster .image-title p:(color:white!important font:? size:?

You can see I am not too experienced. Would appreciate your help. Also I am not sure where to take the font info from. I am imagining I can just use a font name that squarespace offers me in the site styles?

Best wishes,


Edited by Water_Dragon_Fabrics
Link to comment
  • 3 weeks later...

I finally figured this out! It was really hard to find the element in the code. (This is on a 7.1 site.)


This worked for me for the heading:


.sqs-block-image .design-layout-poster .image-title h1 { 
    font-family: Arial;
    color: #000000 !important;


For the Sub-Title, just switched h1 to p:

.sqs-block-image .design-layout-poster .image-subtitle p {
    font-family: Arial;
    color: #000000 !important;


The font-family did not need the !important flag, but the color did. 

Link to comment
  • 2 years later...
On 4/7/2023 at 5:25 AM, mhurley118 said:

could you or someone help me find the code do this for 7.0??

Above code should work for 7.0 and 7.1. You can try it first

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.