Jump to content

Is it possible to change the font style of a Summary Block heading?

Go to solution Solved by EmBee,

Recommended Posts

  • Solution

This worked for me, add it to the Custom CSS Editor:


.sqs-block-summary-v2 {
 .summary-title,
 .summary-heading {
   font-family: "whatever font";
   font-size:15px
 }
}

You can add other font elements in there of course.

Also found this code to made the “Extra large” text setting even larger – you can change the 20px to whichever size you need:


.sqs-block-summary-v2 .summary-block-setting-text-size-extralarge .summary-excerpt p {
 font-size: 20px;
}

Edited by EmBee
Link to comment
  • 1 month later...

@EmBee – I’ve joined your two answers together. For the first block of CSS, I’ve made a slight change too – using the Less syntax makes for less repetitive CSS, this uses simple nested rules.

And I’ve formatted the code. To format code, just highlight the lines of code and use the 5th button in the toolbar:

Use the source

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 5 weeks later...

@SOIN – EmBee has two blocks of CSS, I just combined the separate answers together. If you want to make use of both, just paste both lots into the CSS Editor.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 2 years later...
  • 6 months later...
  • 10 months later...

Hi @EmBee , I made a video tutorial for you on how to Change Font Style of Block Heading. Hope this helps! https://www.askquesty.com/squarespace-answers/change-font-style-of-block-heading-squarespace-tutorial

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Link to comment
  • 1 year later...
17 minutes ago, Nondys said:

What about if you need to change the text size on mobile??

/* 767 with SS7.1, 640 with SS 7.0 */
@media screen and (max-width:640px) {
.sqs-block-summary-v2 {
 .summary-title,
 .summary-heading {
   font-family: "whatever font";
   font-size:15px
 }
}
}

 

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
3 minutes ago, Nondys said:

 

@tuanphan Thank you so much!

It's only changing the heading title. What about the body? I attached a photo for your reference 🙂

\

Can you share link to page in screenshot?

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

Here is the code I used to change...

1. Summery Title
2. Summery Heading
3. Summery Excerpt

I added a little spacing too 🙂

letter-spacing: 1px;

I used the first code to change everything on mobile, and the second for just desktop 🙂

 

 

CSS


//change summery text on mobile//
@media screen and (max-width: 641px) {
.sqs-block-summary-v2 {
 .summary-title, {
font-size: 20px !important;
   font-family: "playfair display";
  }
 .summary-heading {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:20px
 }
  .summary-excerpt {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:25px
  }
 }
}


//change summery text on desktop//
@media screen and (min-width: 641px) {
.sqs-block-summary-v2 {
  .summary-title, {
font-size: 30px !important;
   font-family: "playfair display";
  }
 .summary-heading {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:25px
  }
  .summary-excerpt {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:25px
  }
 }
}

Link to comment
  • 5 months later...
On 6/14/2020 at 6:12 PM, Nondys said:

Here is the code I used to change...

1. Summery Title
2. Summery Heading
3. Summery Excerpt

I added a little spacing too 🙂

letter-spacing: 1px;

I used the first code to change everything on mobile, and the second for just desktop 🙂

 

 

CSS


//change summery text on mobile//
@media screen and (max-width: 641px) {
.sqs-block-summary-v2 {
 .summary-title, {
font-size: 20px !important;
   font-family: "playfair display";
  }
 .summary-heading {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:20px
 }
  .summary-excerpt {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:25px
  }
 }
}


//change summery text on desktop//
@media screen and (min-width: 641px) {
.sqs-block-summary-v2 {
  .summary-title, {
font-size: 30px !important;
   font-family: "playfair display";
  }
 .summary-heading {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:25px
  }
  .summary-excerpt {
   font-family: "proxima nova";
   letter-spacing: 1px;
   font-size:25px
  }
 }
}

Hey! This worked beautifully for the title but the subtitle/description still didnt change for me. I'm using this with a grid Summary Block pulling a video gallery onto a page if that helps!

Link to comment
1 hour ago, ashleemundywebsitede said:

Hey! This worked beautifully for the title but the subtitle/description still didnt change for me. I'm using this with a grid Summary Block pulling a video gallery onto a page if that helps!

If you share link to page where you used code, 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

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.