Jump to content

Overlapping font styles

Recommended Posts

On 12/13/2021 at 3:18 AM, Poppyseeds said:

I would like it to say: Meet Stephen

Would like to do "Meet" in the darker sans serif font.

And add "Stephen" in script over the top of "Meet," but a bit further down.

So, so grateful!

 

The text will be paragraph or heading 1, heading 2,..?

You can use Markdown Block with this syntax

<span style="font-family:monospace;color:dark;">Meet</span><span style="position:relative;top:-50px;">Stev</span>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
3 hours ago, tuanphan said:

The text will be paragraph or heading 1, heading 2,..?

You can use Markdown Block with this syntax

<span style="font-family:monospace;color:dark;">Meet</span><span style="position:relative;top:-50px;">Stev</span>

 

 

Hello Tuan!

I inserted the above into a Markdown Box, and put in my specifics:

 

<h1><span style="catamaran:monospace;color:dark;">Meet</span></h1><span style="position:relative;top:-55px;">Steve</span></span>

 

I'm still not doing something correctly. The "Meet" looks good, but the "Steve" is not sitting directly below the "Meet."

And I'm not sure how to change "Meet" my custom font, entitled Blue Pen.

I have to vary the color and weight, too, but I'll try to figure that out on my own.

 😛

Help...

 

TWO OVERLAPPING FONTS.png

 

OVERLAPPING FONT ISSUE.JPG

Edited by Poppyseeds
Gave wrong code block and pic. Updated...
Link to comment
On 12/14/2021 at 11:51 PM, Poppyseeds said:

 

Hello Tuan!

I inserted the above into a Markdown Box, and put in my specifics:

 

<h1><span style="catamaran:monospace;color:dark;">Meet</span></h1><span style="position:relative;top:-55px;">Steve</span></span>

 

I'm still not doing something correctly. The "Meet" looks good, but the "Steve" is not sitting directly below the "Meet."

And I'm not sure how to change "Meet" my custom font, entitled Blue Pen.

I have to vary the color and weight, too, but I'll try to figure that out on my own.

 😛

Help...

 

TWO OVERLAPPING FONTS.png

 

OVERLAPPING FONT ISSUE.JPG

Can you share link to page where you added Markdown? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

Can you share link to page where you added Markdown? We can check easier

Well, I removed "Meet Steve," however, a similar issue has arrived in the re-do.

I would like to put the red block behind the text; additionally, there will be more elements in this area. I researched stacking. I don't understand it yet. I tried.

Site: https://cardioid-roadrunner-wfzr.squarespace.com/config/

PWD: stacking

Thank you, again, for your time and expertise!

OVERLAPPING ELEMENTS ISSUE.png

Link to comment
On 12/18/2021 at 1:44 AM, Poppyseeds said:

Well, I removed "Meet Steve," however, a similar issue has arrived in the re-do.

I would like to put the red block behind the text; additionally, there will be more elements in this area. I researched stacking. I don't understand it yet. I tried.

Site: https://cardioid-roadrunner-wfzr.squarespace.com/config/

PWD: stacking

Thank you, again, for your time and expertise!

OVERLAPPING ELEMENTS ISSUE.png

FIrst, h8 doesn't exist, you can use h1, h2, h3, h4, h5, h6

Next, change this

<h8><center>America's Call-First Plumber!</center><h8></h8></h8>

to this

<h2 class="text-red"><center>America's Call-First Plumber!</center></h2>

Next, add this to Design > Custom CSS

h2.text-red {
    font-family: Thankfully;
    font-size: 100px !important;
    font-weight: 400;
    color: blue !important;
    letter-spacing: 2.2pt !important;
    line-height: 0em !important;
}
h2.text-red:after {
    background-color: #9e0003;
    content: "";
    height: 50px;
    width: 70%;
    display: block;
    margin: 0 auto;
}

Next, remove your font-face code (the code is invalid), add this new code

@font-face {
        font-family: Thankfully;
    src: url(https://static1.squarespace.com/static/61bcd157b473301415403cf2/t/61bcd15fb473301415403ea3/1639421750583/Thankfully.ttf)
}

image.thumb.png.34820abcf9e67f6eb5a5711c9c8b464e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
17 hours ago, tuanphan said:

FIrst, h8 doesn't exist, you can use h1, h2, h3, h4, h5, h6

Next, change this

<h8><center>America's Call-First Plumber!</center><h8></h8></h8>

to this

<h2 class="text-red"><center>America's Call-First Plumber!</center></h2>

Next, add this to Design > Custom CSS

h2.text-red {
    font-family: Thankfully;
    font-size: 100px !important;
    font-weight: 400;
    color: blue !important;
    letter-spacing: 2.2pt !important;
    line-height: 0em !important;
}
h2.text-red:after {
    background-color: #9e0003;
    content: "";
    height: 50px;
    width: 70%;
    display: block;
    margin: 0 auto;
}

Next, remove your font-face code (the code is invalid), add this new code

@font-face {
        font-family: Thankfully;
    src: url(https://static1.squarespace.com/static/61bcd157b473301415403cf2/t/61bcd15fb473301415403ea3/1639421750583/Thankfully.ttf)
}

image.thumb.png.34820abcf9e67f6eb5a5711c9c8b464e.png

You are a genius. I NEVER would have gotten that right. 

So, I thought I could create further font options over and above what's available. I thought wrong!

I'm trying to use this same idea on another site, but cannot get it to work. The underline is still on top. 😔

Now I'm off to decipher what you did and see if I can find my mistake.

Edited by Poppyseeds
Add follow-up question back in... :(
Link to comment
Quote

Why does the "red" mean in the "h2 text-red" code line when the font is blue?

The .text-red part of h2.text-red is a class name. Its only function is to tell where something is located in a document. It's just a label really. Kind of like a street address or phone number. It doesn't actually control color. That is done by the color : blue; property/value pair.

If you want you can change the red to blue but you have to make sure you make the change everywhere that class name appears.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
7 minutes ago, creedon said:

The .text-red part of h2.text-red is a class name. Its only function is to tell where something is located in a document. It's just a label really. Kind of like a street address or phone number. It doesn't actually control color. That is done by the color : blue; property/value pair.

If you want you can change the red to blue but you have to make sure you make the change everywhere that class name appears.

 

Thanks!

I truly have to get the hang of the lingo; I saw "text-red" and "h2" and thought it was color of headline 2 font.

Now I'm tearing my hair out. The coding works on the site for which I was inquiring, but not the other for which I was hoping to simply modify. Was hoping it would be that easy.

Link to comment
Quote

I truly have to get the hang of the lingo; I saw "text-red" and "h2" and thought it was color of headline 2 font.

One place to start W3Schools - CSS Tutorial.

Quote

Now I'm tearing my hair out. The coding works on the site for which I was inquiring, but not the other for which I was hoping to simply modify. Was hoping it would be that easy.

Computers are very exacting. If something has not been done in exactly the same way in two places then the CSS will fail.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.