How do I change the thickness of bold text?

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

Hey @AlexRich, you can target 'strong' and adjust the font weight

strong {
  font-weight: 400;
}

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

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

 

 

 

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

Hi Tuanphan,

Thanks for your response.

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

Best,

Alex

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.

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!

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;

}

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.