Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


EmBee
Go to solution Solved by EmBee,

Question

  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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

Posted Images

19 answers to this question

Recommended Posts

  • 4

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 post
  • 0

@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 post
  • 0

@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 post
  • 0

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/

Link to post
  • 0

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 post
  • 0
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
 }
}
}

 

Link to post
  • 0
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?

Link to post
  • 0

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 post
  • 0
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 post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...