Jump to content

How do I change the thickness of bold text?

Recommended Posts

Hi,

Does anyone know how to change the thickness of bold text (i.e. text that has been emboldened)?

I'm looking to make some text bold, but not as bold as the bold button currently makes it.

I know you can change the thickness of normal fonts in the settings, but I'm not sure if it's possible to change the intensity of bold text and whether custom code is required.

Many thanks,

Alex

Link to comment

Hi Abi,

Thanks very much for your response.

I tried adding your code and adjusting the number and unfortunately it only allows me to change whether the text is bold or not bold. It doesn't actually give me control over the weight of the bold font. It appears as though <= 500 is not bold and >=501 onwards is bold. Below are few screenshots to illustrate this.

Do you have any ideas why this might be happening?

Best,

Alex

Fontweight501(bold).thumb.JPG.ad2dade91d86ac2935efa6bfe4455fc3.JPGFontweight500(notbold).thumb.JPG.34892be72a5eec817602446b027c0cd8.JPG

 

 

 

Link to comment
On 4/18/2023 at 1:03 AM, AlexRich said:

Hi Abi,

Thanks very much for your response.

I tried adding your code and adjusting the number and unfortunately it only allows me to change whether the text is bold or not bold. It doesn't actually give me control over the weight of the bold font. It appears as though <= 500 is not bold and >=501 onwards is bold. Below are few screenshots to illustrate this.

Do you have any ideas why this might be happening?

Best,

Alex

Fontweight501(bold).thumb.JPG.ad2dade91d86ac2935efa6bfe4455fc3.JPGFontweight500(notbold).thumb.JPG.34892be72a5eec817602446b027c0cd8.JPG

 

 

 

Can you share link to this site? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/20/2023 at 9:19 PM, AlexRich said:

Hi Tuanphan,

Thanks for your response.

The website page is www.sigmascreed.co.uk/products

Best,

Alex

It looks like SS loaded 2 bold style only

To make SS load more bold style (then we can use CSS code then), first you access Design > Site Styles > Fonts > Assign Styles > Choose any elements > then assign font with different font weight

This will force SS load more weights, then you can use code above.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Hey Abi, I actually made a video off the back of your query over on YT: 

Some fonts only have a set amount of font weights to choose from (anywhere between 100-900) so it is dependent on what you're using on what site. Hope this helps!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
  • 5 months later...
On 5/12/2023 at 11:54 PM, bycrawford said:

Hey Abi, I actually made a video off the back of your query over on YT: 

Some fonts only have a set amount of font weights to choose from (anywhere between 100-900) so it is dependent on what you're using on what site. Hope this helps!

Hi Sam,

I tried this code but it doesn't work on my site.

I've uploaded Google's Crimson Text in regular, italic, semi-bold 600, and semi-bold 600 italic. But on my site, it's using the bold 700 and bold 700 italic styles.

Can you assist with this?

This is my website: https://www.kristinkuehn.com 

Password: 2eRFn7gQ

This is my code relating to fonts below: 

// My own regular font
@font-face {
font-family: CrimsonTextRegular;
src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6509d0807e6fd40c6b635a1d/1695142016438/CrimsonText-Regular.ttf);
}

// ALL text everywhere
html * {font-family: 'CrimsonTextRegular' !important;
}

// My own italic font
@font-face {
  font-family: CrimsonTextItalic;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/65424524ad047a58af5ddb75/1698841893061/CrimsonText-Italic.ttf);
}

// Italic text everywhere
html * em {
  font-family: 'CrimsonTextItalic' !important;
  font-style: normal !important;
}

// Italic text in navigation
.header-nav-item a {
  font-family: 'CrimsonTextItalic' !important;
  font-style: normal !important;
}

// My own bold font semi-bold 600
@font-face {
  font-family: CrimsonTextSemiBold;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6549f8b37dff30592cef97cd/1699346611417/CrimsonText-SemiBold.ttf);
}

// Bold text everywhere
html * b, strong {
  font-family: 'CrimsonTextSemiBold' !important;
  font-style: normal !important;
}

// My own bold italic font semi-bold 600
@font-face {
  font-family: CrimsonTextSemiBoldItalic;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/654deaae3fb4394cc9158bbc/1699605166469/CrimsonText-SemiBoldItalic.ttf);
}

// Bold italic text everywhere
html * b, strong em {
  font-family: 'CrimsonTextSemiBoldItalic' !important; // bold and italics font file name here
  font-style: normal !important;
}

// Change bold font weight
strong {

  font-weight: 600 !important;

}

 

Link to comment
3 hours ago, Aurora said:

Hi Sam,

I tried this code but it doesn't work on my site.

I've uploaded Google's Crimson Text in regular, italic, semi-bold 600, and semi-bold 600 italic. But on my site, it's using the bold 700 and bold 700 italic styles.

Can you assist with this?

This is my website: https://www.kristinkuehn.com 

Password: 2eRFn7gQ

This is my code relating to fonts below: 

// My own regular font
@font-face {
font-family: CrimsonTextRegular;
src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6509d0807e6fd40c6b635a1d/1695142016438/CrimsonText-Regular.ttf);
}

// ALL text everywhere
html * {font-family: 'CrimsonTextRegular' !important;
}

// My own italic font
@font-face {
  font-family: CrimsonTextItalic;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/65424524ad047a58af5ddb75/1698841893061/CrimsonText-Italic.ttf);
}

// Italic text everywhere
html * em {
  font-family: 'CrimsonTextItalic' !important;
  font-style: normal !important;
}

// Italic text in navigation
.header-nav-item a {
  font-family: 'CrimsonTextItalic' !important;
  font-style: normal !important;
}

// My own bold font semi-bold 600
@font-face {
  font-family: CrimsonTextSemiBold;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6549f8b37dff30592cef97cd/1699346611417/CrimsonText-SemiBold.ttf);
}

// Bold text everywhere
html * b, strong {
  font-family: 'CrimsonTextSemiBold' !important;
  font-style: normal !important;
}

// My own bold italic font semi-bold 600
@font-face {
  font-family: CrimsonTextSemiBoldItalic;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/654deaae3fb4394cc9158bbc/1699605166469/CrimsonText-SemiBoldItalic.ttf);
}

// Bold italic text everywhere
html * b, strong em {
  font-family: 'CrimsonTextSemiBoldItalic' !important; // bold and italics font file name here
  font-style: normal !important;
}

// Change bold font weight
strong {

  font-weight: 600 !important;

}

 

Hey Kristin, it looks like you have conflicting code which is stopping the font weight being applied.

The use of the regular font seems to be overriding the bold.

I would suggest process of elimination.

So start by removing all code and then just adding in:

// My own bold font semi-bold 600 

@font-face { 
font-family: CrimsonTextSemiBold;   
src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6549f8b37dff30592cef97cd/1699346611417/CrimsonText-SemiBold.ttf); 
} 

// Bold text strong {  
font-family: 'CrimsonTextSemiBold' !important; 
}

Then you can add the other codes back in one by one. That said, I'm not sure you even need to add bold or italic versions into your site. You should be able to just add the regular text and then specify bold or italic using the text editor.

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
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.