Jump to content

Change font weight of one word

Recommended Posts

Hello,

I was wondering if someone might be able to help me...

On this website homepage I want to change the font weight to 300 of the word 'Creative' in the h1 header at the top so the name 'CreativeBOOST' looks like in the below image. I've tried using a span style just on that word using a markdown block and it appears to work when I'm in the edit mode but once I save and exit edit mode the font seems to just go back to default 400 weight.

what would be the best way to change the font weight of the word 'Creative' to 300?

creativeboost.co.uk

Cover image.jpg

Link to comment

Hi, that sounds like it should have worked. Can you share what you tried? 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
36 minutes ago, FattyGuinness said:

This is what I tried in the markdown block:

<span style="font-weight: 300;">Creative</span>BOOST
==

When viewing the page in the Squarespace editor it works but when I exit the editor it just reverts back to the default

 

 

Have you tried reloading the page?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

Hi please share your site so I can check

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

It's already showing as 300 for Creative. Is the text in the screenshot not what you are wanting to acheive?

 

image.png.befe9770aab8d09418b313ee61dc503e.png

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

Hi Melody495,

Thanks for checking. I believe I have headings set at 400 weight and I want 'Creative' in 300 so its a lighter font than 'BOOST'. I've attached 2 screenshots below, the first shows in edit mode 'Creative' appears in a lighter font compared to 'BOOST' which is how I want it. But when I exit the edit mode then its all reverting back to the same font weight.

Screenshot 2023-10-29 at 21.17.38.png

Screenshot 2023-10-29 at 21.17.57.png

Link to comment

Hi, I normally to view accurately what the website looks like, I use the Preview icon in the top right corner. or view my site in incognito mode.
 

Your code is working as you have written it. "Creative" is at font-weight = 300 and "Boost" is at font-weight = 400, which is the setting for h1. However, I think the difference between 300 and 400 is not as big of a difference for as you want (for this font family). I actually don't see a difference between them in the browser.

You can try making "Boost" bold instead (or font-weight=600/700), to see a bigger difference.

image.thumb.png.20b8389f3f15bb1a4972c83b718e180a.png

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

It is weird as Oswald do support 300 and 400. This might work. Can you try this in your markdown instead?

<h1 style="font-weight:300; display:inline">Creative</h1><h1 style="display:inline">BOOST</h1>

 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

Hi Melody495,

I tried that code but got the same result where it seems to work when in editor mode but not when I save and exit.

That is why I'm confused as I know the Oswald weights that are available are 300,400,700. I know the difference between 300 and 400 is subtle but there's definitely a visible difference. What makes it more confusing is that if put weight 700 in the code it works fine. So I think the code I have in the markdown is correct...

Link to comment

Hi, I agree your code looks fine. I just looked again. I was actually able to reproduce your issue! AKA working in editor then not in preview mode. I am also unable to change it to 300 in the inspection tool, so something is amiss.

It might be a SquareSpace issue and you have to contact customer care. Or do the workaround of changing BOOST to 500 and above.

Unless @creedon can shed more light on this? or @tuanphan?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

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.