Questions about uploaded font; punctuation inconsistencies?

Hi,

I've uploaded Google's Crimson Text regular and italic to my website.

1. I'm unsure if punctuation is displayed correctly. I've attached a screenshot where you can see it for regular and italic text. The punctuation for the regular style seems wrong on my website compared to what's on Google's: https://fonts.google.com/specimen/Crimson+Text/glyphs

Why? How can I fix it?

2. Do I need to upload the bold styles, too, in order to make sure that everything is displayed authentically?

3. On Google's website, it says:

Quote

CSS rules to specify families:

font-family: 'Crimson Text', serif;

Is this relevant for me? Do I need to change my code?

My website: https://www.kristinkuehn.com

Password: 2eRFn7gQ

My code:

// My own regular font
@font-face {

font-family: Crimson Text;

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

}

// My own italic font
@font-face {
  font-family: Crimson Text Italic;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/65424524ad047a58af5ddb75/1698841893061/CrimsonText-Italic.ttf);
}

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

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

// Italic text in navigation
.header-nav-item a {
  font-family: Crimson Text Italic !important;
  font-style: normal !important;
}

Many thanks!

17 minutes ago, melody495 said:

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.

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!

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.

11 minutes ago, melody495 said:

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.

Can I ask you one more question?

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.

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!

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.

6 minutes ago, melody495 said:

Sorry, let me correct myself. You should be able to do bold and italic without uploading a different font file. I'm getting it confused where if the font family has more variations than bold and italics.

 

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.

No, that's not working.

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).

47 minutes ago, melody495 said:

 

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..

Short answer to why you need each of regular, bold, italic for the same font family... 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. These font family would have their equivalent of regular, bold, italic, etc. But SquareSpace translate those for you, when you do text editing with B, I etc. 

But with custom font, you have to specify each of the variations that you want to use. 

Hope that make sense and helps!

Thanks so much for taking the time to explain!

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

I've uploaded the font to my website to comply with data privacy laws in Germany. In Squarespace, I've set all styles to a system font, i.e. Georgia.

What I'm unsure of is if I need to assign headers, paragraphs, etc. individually in order to have everything working properly? Or if I can assign Crimson Text to "all text everywhere" since I'm only using one font family?

I was under the impression that it's possible to assign one font family to all text everywhere on my website. (I had read something like that somewhere online.) BUT, I learned that I needed to assign the italic style to my site navigation individually, otherwise it wasn't picking up the italic style. That made me wonder if I needed to do the same for other places on my website? Or how I could test that?

In other words, is the code that I'm currently using assigning Crimson Text to all text everywhere? Or is that even possible?

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, melody495 said:

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.

 

I'm so sorry, I was wrong about the buttons, they're picking up Crimson Text.

The site navigation seems to be the only place that didn't pick up the italic style. Why I don't understand...

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?

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

3 minutes ago, melody495 said:

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

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

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 😄 

40 minutes ago, melody495 said:

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

What code would I use for the bold italic style?

5 minutes ago, Aurora said:

What code would I use for the bold italic style?

Is this for one text box or you need to change to a set of text?

You can try in the text editor B and I.

2 minutes ago, melody495 said:

Is this for one text box or you need to change to a set of text?

You can try in the text editor B and I.

For whenever I want to change anything anywhere... I thought it would be the same as for the italic style and the bold style, italic bold being another style since that's a separate file that I've downloaded when I downloaded the entire font family, see here: https://fonts.google.com/specimen/Crimson+Text Does that make sense?

9 minutes ago, Aurora said:

For whenever I want to change anything anywhere... I thought it would be the same as for the italic style and the bold style, italic bold being another style since that's a separate file that I've downloaded when I downloaded the entire font family, see here: https://fonts.google.com/specimen/Crimson+Text Does that make sense?

Ok.

Yes, so if you want each of those variations in the font family, then upload each and use them as you've named them. This is the clearest way to use them.

You should also be able to use B and I in the text editor. B is Bold, if you want semi bold then  use CSS.

2 minutes ago, melody495 said:

Ok.

Yes, so if you want each of those variations in the font family, then upload each and use them as you've named them. You should also be able to use B and I in the text editor.

B is Bold, if you want semi bold then use CSS.

Thank you!

How would I write this for bold italic though?

// 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;
}

Just now, Aurora said:

How would I write this for bold italic though?

Add this,

// Use this font for bold and italics text
html * b, strong em {
  font-family: xxx !important; // bold and italics font file name here
  font-style: normal !important;
}

5 minutes ago, melody495 said:

Add this,

// Use this font for bold and italics text
html * b, strong em {
  font-family: xxx !important; // bold and italics font file name here
  font-style: normal !important;
}

 

Many thanks!