melody495

Hi, please share a link to your website so can check easier, and also the custom code you used for changing the font. Thanks

Hi, there is enough room for your text not to wrap. You can adjust the text box so it's wider, then it won't wrap when the screen size is smaller. Your text is centered, so just make sure you are expanding the text box equally on left and right.

Let me know how it goes.

2 minutes ago, Aurora said:

Thank you so much for all of your help with this! I appreciate it.

Brain not fired up on Saturday morning, we got there eventually 😄 

4 minutes ago, Aurora said:

I'm confused now about the new code you suggested. Are you suggesting that in place of this:

html * {font-family: 'Crimson Text' !important;}

And I would do the same (replace html * with h1, h2, h3, h4, .sqsrte-large, p, .sqsrte-small?) for the italic style?

Missed those. Don't need to change to what I suggested. Gone down a rabbit hole that you didn't have to, sorry!

So what you have should already work. The reason navigation wasn't italics is because in site styles is it normal.

If you need bold font, upload the bold font file, and I've updated below to include bold. 

// Change font family for all text
html * {font-family: 'Crimson Text' !important;}

// Use this font for italics tex
html * em {
  font-family: 'Crimson Text Italic' !important;
  font-style: normal !important;
}

// Use this font for bold text
html * b, strong {
  font-family: 'Crimson Text Bold' !important;
  font-style: normal !important;
}

Let me know how it goes

1 minute ago, Aurora said:

To simplify things for myself, I'm using only one font family (Google's Crimson Text) on my entire website.

Ok, then you should do the following to override the font family:

// set all font to the same font-family
h1, h2, h3, h4, .sqsrte-large, p, .sqsrte-small {
	font-family: xxx
}

Then adjust all the other settings in Site Styles -> Font. Things like size, line height, line spacing etc. This would be the easiest way. Just ignore the font family in there, all other settings will work without CSS.

Only use CSS where you can't change in Site Styles. Like you have for the navigation.

2 minutes ago, Aurora said:

No, that's not working.

Ok, then yes, you would need to use a custom font for each variation. Because Crimson Regular italics might not look the same as Cirmson Italics. And safer so you control what those font means, rather than the browser trying to interpret what italics mean (which might not be possible anyway).

Sorry, let me correct myself. You should be able to do bold and italic without uploading a different font file. 

So in this example

// Italic text everywhere
html * em {
  font-family: Crimson Text Italic !important;
  font-style: normal !important;
}

You could try

// Italic text everywhere
html * em {
  font-family: 'Crimson Text' !important;
  font-style: italic !important;
}

They should look the same.

If not, then you have to use the font file for Italic. Because Crimon Regular italics might not be the same as Crimson Italics.

But might be safer to upload each of the variations you need so you can control exactly what they look like.

48 minutes ago, Aurora said:

Why do I have to specifically target the navigation for the italic style?

I'm asking because I'm worried that there might be other places that I'm currently unaware of that I would have to specifically target as well.

It depends how you have your site styles set up, and what font design you want across your website. 

By default, navigation is a "paragraph" font, specifically paragraph 2 (p2). So you can target p2 or  just navigation menu specifically. However, change p2 will change all text that use p2 style. This is where your font design across your website comes in.

When you first created the website, you would have chosen which font-family to use for "heading" and "paragraphs". These settings are still there. SquareSpace by default assign a font style (family, size, line height etc) to each text type. If you go to site styles -> font, you can see all the different settings. Including navigation menu items.

But if you want custom font, then you have to specify each of the font style you want, and tell SquareSpace to use them, where you want to use them. If you don't, it will use whatever is set up in site styles. There is a more generic way to set font family for custom font, but you can also target specific elements to set the font family, like you have done. See more below..

All text in SquareSpace are one of the following; h1, h2, h3, h4, p1, p2, p3. You can set 1 font family for all the h's, and another font family for all the p's.

Edit: see below.

Hope that make sense and helps!

6 minutes ago, Aurora said:

Thank you SO much! It looks great now ❤️

I have one more question. I'm not using any bold styles on my website atm, but if I should use them in the future, would I need to upload those styles as well?

Many thanks!

You are very welcome 🙂 

Edit: For bold style, yes, you would have to upload the relevant font file. Like you've done for the above.

Hi, maybe there is a way to achieve your design without that code? What does your shape01 do?

If not, please share a link to your site so we can check easier.

You are welcome 🙂 I would always check the mobile view after making changes. It also tells you when there are changes you need to look at (the blue dot notification). 

Hi, there are 2 issues.

When you declared your new font, you are missing single quotes around the name, e.g. replace your first one with the below. Do the same for all your other custom fonts.

// My own regular font
@font-face {

font-family: 'Crimson Text'; // font family name, this can be named as anything you want. Once here, this is the name you will use.

src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6509d0807e6fd40c6b635a1d/1695142016438/CrimsonText-Regular.ttf);

}

When you then want to use your font for something, you need to refer to the same name as per above. e.g. change your code below from this

// ALL text everywhere
html * {font-family: 'CrimsonText' !important;}

to this. (the name you used is missing a space)

// ALL text everywhere
html * {font-family: 'Crimson Text' !important;}

Now just check and make sure they all match up and should all be working.

Let me know how it goes.

@roconnor78 You're welcome! Please mark as solution to help others. 

Hi have you tried editing the layout on mobile edit mode? If further help required please share a link to your website so can check easier. 

Hi, Edit -> Edit Site Header -> see options in screenshot below.

Edit: option available in 7.0 as well as 7.1

Ziggy did all the leg work, but you are welcome and glad it is working for you now 🙂

15 minutes ago, AmyMcKinney said:

I can't figure out 1) why they're even there since I supposedly changed the icon out

This is because in the code, you haven't changed them out, you added your new arrows to the old arrows. It's probably best not to manually delete SS elements, as might have unintended consequences.

You could hide the old arrows, but not with the way the new arrows have been added. Ziggy's way is effective for what you need!

1 hour ago, 48thmediaco said:

Here is the code I have input:

url('https://static1.squarespace.com/static/6511a807de16be47fc25962d/t/6511af9bf6537a05c7d44bd1/1695657885773/Unbounded-Medium.ttf');
}

Hi, which text is not working as you expect? What font are you expecting it to be?

Also, is that all the code? As it seems cut off from the top.

And the code to load the font file for Unbounded-SemiBold is not in your code.

1 minute ago, Alexsh said:

When you mentioned deleting and recreating it, what exactly did you mean? I tried that, but it didn't work. The reason is that the order of the blocks is important, not the sequence of their creation... Or did I perhaps misunderstand you?

Hi, I thought the order of creation matters, hence I said to create a new text block. But I think you just confirmed by testing that what matters is the ordering on the page, rather than creation.

53 minutes ago, creedon said:

Here is a video where I show some of my diagnostic technique.

Thank you so much for sharing this! 

@creedon is the code in static.css? if so how did you know where the custom css starts? 🤔

2 hours ago, Phex said:

Im so sorry. I meant to say theres NO error... lol

Ok. If you need help looking at your code, please post it here and we can see if we can spot the issue. 

Quote

Try removing "FontURL" from your first font file extension. ".ttfFontURL"

@Flo-ichigoods just making sure you hit "save" after doing this

7 minutes ago, Alexsh said:

It seems like there's no pure CSS solution for revealing the text in the blocks sitting before the hover blocks.

You are welcome! Just delete that block , and recreate it, then it would come after everything else, and your code would work as with the other pairing

Edit: copy and paste (duplicate), and delete original

Please share a link to your website, and let me know which text you are having trouble with.