Jump to content

bold font selector does not work after using custom fonts

Go to solution Solved by Ziggy,

Recommended Posts

Hello everyone,

After installing and trying to use a custom font, the Bold selector does not work properly. The amount of Bold it adds to the font is minimal. 


The first screenshot shows how the bold selector behaves when using the font through google fonts from the "Site Styles".
The second screenshot shows how the bold selector behaves using the same font but installed by me.

The font installed is Poppins Light. This is the custom-css code I'm using:

h3 {
font-family: 'Poppins-300';
letter-spacing: 0.02em;
font-size: 1.8rem;
}

 

image.thumb.png.a4332195a53d41154586b10ee8029d74.png

 

image.thumb.png.6b4eb92b05f3edb5c0a2b081fd830a06.png

image.thumb.png.ec3259a9eaaceefdbd0ff8ac8454746a.png

 

Edited by gab
Link to comment

It looks like the font has gone from a weight of 300 to 400, I would suggest that you install Poppins with a weight of 600 and add CSS a bit like this after installing the heavier Poppins:

h3 strong {
font-family: 'Poppins-600';
letter-spacing: 0.02em;
font-size: 1.8rem;
}

Change the font family name to match your upload.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
6 minutes ago, Ziggy said:

It looks like the font has gone from a weight of 300 to 400, I would suggest that you install Poppins with a weight of 600 and add CSS a bit like this after installing the heavier Poppins:

h3 strong {
font-family: 'Poppins-600';
letter-spacing: 0.02em;
font-size: 1.8rem;
}

Change the font family name to match your upload.

Thank you Ziggy,
the problem is that by doing that, it changes the weight of the whole paragraph using h3, I want to keep the font weight for the paragraph on 300 but be able to select parts of the text in bold. 

Link to comment
10 minutes ago, Ziggy said:

It looks like the font has gone from a weight of 300 to 400, I would suggest that you install Poppins with a weight of 600 and add CSS a bit like this after installing the heavier Poppins:

h3 strong {
font-family: 'Poppins-600';
letter-spacing: 0.02em;
font-size: 1.8rem;
}

Change the font family name to match your upload.

sorry man, I just missed the "strong". Thanks a lot. That solved the problem!

Link to comment
  • Solution
13 minutes ago, gab said:

sorry man, I just missed the "strong". Thanks a lot. That solved the problem!

No problem, glad that works for you, thanks for the like!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
12 minutes ago, Ziggy said:

No problem, glad that works for you, thanks for the like!

another question:

it is possible to use the italic selector as a selector for a different font family, but without the typeface being converted to italic?

I'm using this code to target the font family, but obviously when I select the word I want to convert in the editor it converts it to italic.

h3 em {
font-family: 'texgyretermes-bold';
font-size: 1.78rem;
letter-spacing: 0.02em;

 

Link to comment
17 minutes ago, gab said:

another question:

it is possible to use the italic selector as a selector for a different font family, but without the typeface being converted to italic?

I'm using this code to target the font family, but obviously when I select the word I want to convert in the editor it converts it to italic.

h3 em {
font-family: 'texgyretermes-bold';
font-size: 1.78rem;
letter-spacing: 0.02em;

 

I'll open this as a different question

Link to comment

@gab If you add  font-style: normal !important;  that should remove the italics.  

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
8 minutes ago, gab said:

you just made my day!

Glad to help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.