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

Depending on the template it seems that the summary block will inherit the style of another element rather than normal headings. How can I change it to a different style?

@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:

sorry where I do find the combined answer css code

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

Thanks for this code, worked on Rally with

.summary-title-link { font-size: 17px; }

And if you're looking to change the color, you can do this:

.summary-title,
.summary-heading {
    color: #ffffff !important
  }

You can use a hex color tool to replace #ffffff with any color you want, like this tool here:https://www.hexcolortool.com/

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

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

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

@tuanphan Thank you so much!

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

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?

@tuanphan Sure! It's https://www.littlemisskonacoffee.org/

10 hours ago, Nondys said:

 

@tuanphan Sure! It's https://www.littlemisskonacoffee.org/

Which page? 

@tuanphan https://www.littlemisskonacoffee.org/ I added a private password because it's not ready yet. The password is coffee.

Thank you so much!

@Nondys you might need to add !important to the CSS

@ryandejaegher Thank you so much that worked! I am definitely not a coder, so I look up as much code as I can and I love this forum community you guys are soooo helpful!

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

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!

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