Styling the asterisk symbol in different font to H1 font.

Hi, 

I'm trying to style my asterisk symbols (*) site-wide in a specific font. This being different to my current Headings and Paragraphs. 

Is this possible with CSS? (want to match the asterisk of my logo)

Colour and size can stay the same, just after a specific asterisk style throughout.

Thank you in advance :)

On 8/10/2021 at 11:03 PM, MartinC said:

Hi, 

I'm trying to style my asterisk symbols (*) site-wide in a specific font. This being different to my current Headings and Paragraphs. 

Is this possible with CSS? (want to match the asterisk of my logo)

Colour and size can stay the same, just after a specific asterisk style throughout.

Thank you in advance :)

Hi. If you share link to your site, we can check easier

one way you could do this is to leverage the ::before pseudo-element in css. you don't actually type the asterisk in your text, you let CSS put it in for you, you can then style it however you want.

so, for example, you could add this to your custom css and this would put an asterisk in before every h1 and style it with the default monospace font. you could use any system font, or upload a custom font (see the links in @tuanphan signature ⬆

h1:before {
    content: '*';
    font-family: monospace;
}

one thing you have to be careful with here is that squarespace can use H1 pretty much wherever they want, so you are better to be more targeted than that, which we can't really help you with unless we see your site. however, broadly speaking all you do is use section id selectors before the h1:before bit in the css here. using that chrome extension Squarespace ID finder is the easiest way for that I think

you have another question on here about aligning it, so I'll link this answer on that post, but essentially the first version just adds the content in "inline" before the other text, if you want to align it, you can set it to absolute and then shift it left with a negative margin, you might need to play around with the left amount a bit

h1:before {
    content: '*';
    font-family: monospace;
    display:block;
    position:absolute;
    left:-0.6em
}

these changes are broad, all H1 elements, so you will need to be more specific with your selectors but we can't help with that without your site url.

5 hours ago, iamdavehart said:

one way you could do this is to leverage the ::before pseudo-element in css. you don't actually type the asterisk in your text, you let CSS put it in for you, you can then style it however you want.

so, for example, you could add this to your custom css and this would put an asterisk in before every h1 and style it with the default monospace font. you could use any system font, or upload a custom font (see the links in @tuanphan signature ⬆

h1:before {
    content: '*';
    font-family: monospace;
}

one thing you have to be careful with here is that squarespace can use H1 pretty much wherever they want, so you are better to be more targeted than that, which we can't really help you with unless we see your site. however, broadly speaking all you do is use section id selectors before the h1:before bit in the css here. using that chrome extension Squarespace ID finder is the easiest way for that I think

you have another question on here about aligning it, so I'll link this answer on that post, but essentially the first version just adds the content in "inline" before the other text, if you want to align it, you can set it to absolute and then shift it left with a negative margin, you might need to play around with the left amount a bit

h1:before {
    content: '*';
    font-family: monospace;
    display:block;
    position:absolute;
    left:-0.6em
}

these changes are broad, all H1 elements, so you will need to be more specific with your selectors but we can't help with that without your site url.

Thank you this has worked! My site URL is this but unsure if you can see it as it's not live?

https://guitar-terrier-37w2.squarespace.com/config

I'm still having trouble assigning a font to monospace, this is how I've done it currently:

//Adding monospace font//
@font-face {    
font-family: 'MYRIAD';       
src: url('https://static1.squarespace.com/static/610956a75c3677569f0d7ab2/t/610a58a0a8ae215645b63db5/1628068000826/MYRIADPROREGULAR.woff');  }

//Asign monospace font//
monospace {font-family: 'MYRIAD';}

But it doesn't seem to be changing it 😞

I used this code as suggested to add the asterisk:

//Style asterix//
h1:before {
    content: '*';
    font-family: monospace;
    display:block;
    position:absolute;
    left:-0.5em
}

Thank you in advance! (attached a screenshot of what it looks like now)

sorry. I wasn't clear. monospace *is* a font. you need to replace that with your font.

@font-face {    
font-family: 'MYRIAD';       
src: url('https://static1.squarespace.com/static/610956a75c3677569f0d7ab2/t/610a58a0a8ae215645b63db5/1628068000826/MYRIADPROREGULAR.woff');  
}

h1:before {
    content: '*';
    font-family: MYRIAD;
    display:block;
    position:absolute;
    left:-0.5em
}

we can't see your site btw. you have to set a password and then share the password in your post. again, see the instructions in tuan's signature if you don't know how to do that. 

16 hours ago, iamdavehart said:

we can't see your site btw. you have to set a password and then share the password in your post. again, see the instructions in tuan's signature if you don't know how to do that. 

Oh! I see, okay so here is the URL: guitar-terrier-37w2.squarespace.com

Password is: AsteriskHelp%

Your code above worked perfectly thank you, and I've managed to assign it so some blocks and that also works well. 

The issues I'm having now is how they appear on mobile, they seem to be getting cut off, any idea how I can fix this?

Also thanks for all this help!

Megan 

hi Megan. no problem.

the issue here is that I was moving the asterisk off to the left into whatever space is there. there was lots of space on the desktop one but the mobile one not so much. we can add something else to that though and that should help

h1:before {
    content: '*';
    font-family: MYRIAD;
    display:block;
    position:absolute;
    left:0;
}

h1 {
  	padding-left: 0.5em;
}

if you do it this way, we're moving the heading right and leaving the asterisk left. you can see I've changed left to 0 (it was -0.5em) and then I've moved the space to the rest of the heading in the second rule. 

• You still need the font-face bit from before, don't remove that
• "em" is the width of an "M" in that font. so its relative to the size of the font. you can use "px" if you want to measure it in px, but as it's a font, em is a better measure to use here
• For us to see your site with a password, it has to be published, but hidden by the password. so I still couldn't see it! doesn't matter though

Oh sorry, really rubbish at sharing the website hah! 

But thank you, this did work for mobile which is so great I really appreciate it 🙂