Custom Font not showing as bold in Safari

Hi,

I just realised that Safari is not showing bold text in Safari and on iOS.

Does anyone have an idea how to get this fixed?

See site URL and PW: test123

Thank you.

2 minutes ago, onika said:

See site URL

I can't see your website URL in this post, can you share it here?

Its https://yellow-design.squarespace.com/

How do you have the font set to bold? Is it a custom font installed?

Yes there is a custom font installed:

@font-face {   
font-family: 'DINPro';   
src:url(https://static1.squarespace.com/static/6523aadb11b9db66033889ab/t/6523ac2122640a4ea69823e3/1696836641423/DINPro-Regular.woff);
}

@font-face {
font-family: 'DINProlight';   
src:url(https://static1.squarespace.com/static/6523aadb11b9db66033889ab/t/653628422a85696f717cb24d/1698048066669/DINPro-Light.woff);
}

h1, h2, h3, h4 {font-family: DINPro!important}
p {font-family: DINPro!important}
.sqsrte-small {font-family: DINProlight!important}

.sqs-block-button-element {font-family: DINPro!important}

.form-block * {font-family: DINPro!important}
 

The bold is the usual Squarespace setting in the text block. It shows fine in Chrome or Firefox, but in Safari the custom font shows, but not in bold.

Try this adjustment to your code:

@font-face {   
font-family: 'DINPro';   
src:url('https://static1.squarespace.com/static/6523aadb11b9db66033889ab/t/6523ac2122640a4ea69823e3/1696836641423/DINPro-Regular.woff');
}
@font-face {
font-family: 'DINProlight';   
src:url('https://static1.squarespace.com/static/6523aadb11b9db66033889ab/t/653628422a85696f717cb24d/1698048066669/DINPro-Light.woff');
}

h1, h2, h3, h4 {font-family: 'DINPro' !important;}
p {font-family: 'DINPro' !important;}
.sqsrte-small {font-family: 'DINProlight' !important;}

h1 strong, h2 strong, h3 strong, h4 strong, p strong, .sqsrte-small strong {
  font-weight:600 !important;
}

.sqs-block-button-element {font-family: 'DINPro' !important;}

.form-block * {font-family: 'DINPro' !important;}

@Ziggy unfortunately this does not work. The words in bold, are still not showing as bold in Safari? 

Its not the whole sentence that needs to be bold, but selected words...

In that case it looks like the fonts you have uploaded don't support different font weights. If you will want to upload a DINPro-bold font, and then set that font in this section that is just targeting bolded (strong) text:

h1 strong, h2 strong, h3 strong, h4 strong, p strong, .sqsrte-small strong {
  
}

@Ziggy Thank you very much for helping and looking into this. As we only want part of the headlines to be bold, uploading the bold version will not really help. I guess we might have to work with different colours then 🙂

@Ziggy  of course! You are right and it is working! Thank you so much.

8 minutes ago, onika said:

Thank you so much.

No problem, glad you have that working now!

Thanks for the upvote!