Jump to content

Add Medium font to get a "softer bold"

Recommended Posts

Hi, I would like to highlight some keywords on my website. However, the bold is much stronger than what I would like. 

I am mainly using these two fonts: Orpheus Pro and Omnes Pro. I tried using this code to access different strengths in the font weight but I could only get two options normal font (100 to 500) or strong bold (600 to 900)

strong {

  font-weight: 300 !important;

}

Then I realised I needed to manually add the new font, which I did (see attached screenshot).

I named the font I added manually OrpheusMed and then used this code hoping the Medium font would show when I select something as bold:

@font-face {

    font-family: 'OrpheusMed';

    src: url(https://static1.squarespace.com/static/655336db9e9e267ee5fe5af3/t/65e3086c76c9db4760ef689d/1709377644112/Fontspring-DEMO-orpheuspro-medium.woff2);

} 

h4 {

    font-family: 'OrpheusMed';

}

However, I don't see a big difference between the normal bold and the new (medium) font. I am not sure the code is pulling the font correctly. 

I don't like how dark and thick the letters are with the normal bold (see attachment). 

Is there any way I can "lighten" the bold so it doesn't show as strongly as the regular bold?

This is the page I am working from: https://www.ponchocottier.com/myapproach

Thank you in advance

 

Screenshot 2024-03-02 at 18.39.05.png

Screenshot 2024-03-02 at 18.41.51.png

Link to comment
  • 2 weeks later...

Hi, 

Thank you for your reply.

I don't want to apply it to that heading specifically only. I want to have an option to vary the weight of the bold. The current bold of both of the fonts I am using, Orpheus Pro and Omnes Pro, is too strong, I would like something softer. 

What do I need to do to be able to access different variations in the weight of the fonts using the code below (or any other methods)?

strong {
font-weight: 600 !important;
}

At the moment, changing the values in this code only shows the normal font (100 to 500) and strong bold (600 to 900).

I would love to have a lighter variation between normal and full bold. I saw both fonts offer a medium font and Omnes Pro even gives more variations, but I believe I first need to import them. 

Is there a tutorial that shows the full process on how to do this?

Thanks

Poncho

Link to comment
  • 1 month later...
Posted (edited)

@Poncho

you have to go in Website Tools > Code Injection and use the first box to insert inside the <head> tags the code to embed your fonts.

E.g. for Montserrat, via Google Fonts, I used this code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

to load the full axis of width. 

Then you can use inside CSS. E.g. 

h1 {
  font-weight: 300;
}

Edited by Oukside
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.