Font looks different on website than it looks on Canva

Hi,

I've uploaded Crimson Text to my Squarespace and am using that on my website.

In Canva, I also uploaded Crimson Text to create a banner for my emails. But the font when set in italics looks slightly different. Does this happen?

I'm trying to figure out if there's something that I can do to change this or not.

Many thanks!

Did you upload the italic version of the font and define that? If not and if the font didn't include the italic style, then you will be seeing a pseudo-italic version of the font rather than the designed italic font style.

1 hour ago, Ziggy said:

Did you upload the italic version of the font and define that? If not and if the font didn't include the italic style, then you will be seeing a pseudo-italic version of the font rather than the designed italic font style.

Thanks, Ziggy. I uploaded the italic style, though it's not showing up under uploaded fonts in the text editor. I have to use the italics button.

20 minutes ago, Aurora said:

Thanks, Ziggy. I uploaded the italic style, though it's not showing up under uploaded fonts in the text editor. I have to use the italics button.

How did you reference the uploaded italic font in your Custom CSS?

3 minutes ago, Ziggy said:

How did you reference the uploaded italic font in your Custom CSS?

Oh gosh! In Squarespace, I had only uploaded the regular font. You can find the code that I'm using below. I just checked the italic style online, and you're right, that's not the real italic style (whereas I was thinking the one on Canva wasn't). Can you help me put up the right styles in Squarespace?

/* My own font */
@font-face {

font-family: Crimson Text;

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

}

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

Have you uploaded the italics font?

1 minute ago, Ziggy said:

Have you uploaded the italics font?

I have now, but that alone didn't change anything. Do I need to change the code or add code?

You need to reference it like the regular font:

@font-face {
  font-family: Crimson Text Italic;
  src: url('');
}

h1 em, h2 em, h3 em, h4 em, .sqsrte-large em, p em, .sqsrte-small em, em {
   font-family: Crimson Text Italic;
}

add the font file URL in src:

9 minutes ago, Ziggy said:

You need to reference it like the regular font:

@font-face {
  font-family: Crimson Text Italic;
  src: url('');
}

h1 i, h2 i, h3 i, h4 i, .sqsrte-large i, p i, .sqsrte-small i, i, h1 em, h2 em, h3 em, h4 em, .sqsrte-large em, p em, .sqsrte-small em, em {
   font-family: Crimson Text Italic;
}

add the font file URL in src:

And leave the code I already have as it is? Or do I need to remove the important! ? Cuz it's not working yet...

1 minute ago, Aurora said:

And leave the code I already have as it is?

Of course.

21 minutes ago, Ziggy said:

Of course.

It's not working... looks the same...

What is this part for?

h1 em, h2 em, h3 em, h4 em, .sqsrte-large em, p em, .sqsrte-small em, em {
   font-family: Crimson Text Italic;
}

The regular font code doesn't have that...

43 minutes ago, Aurora said:

What is this part for?

This targets the italic variant of each heading + paragraph style.

Can you share the Custom CSS that you have added for the italic font?

4 hours ago, Ziggy said:

This targets the italic variant of each heading + paragraph style.

Can you share the Custom CSS that you have added for the italic font?

Thank you, Ziggy. Why do I need code to target the italic variants but not to target the regular variants?

Here's all the code I have on fonts:

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

h1 em, h2 em, h3 em, h4 em, .sqsrte-large em, p em, .sqsrte-small em, em {
   font-family: Crimson Text Italic;
}

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

@Ziggy Is this (italic font style issue) still something that you might be able to help me with? Does the code I shared help you?

What website is this on?

To be honest, when I try this the font changes, but I'm not sure the font file is correct.

Quote

 

27 minutes ago, Ziggy said:

To be honest, when I try this the font changes, but I'm not sure the font file is correct.

Yes, it changes except in the navigation menu and announcement bar. Can we add these to the code? Or will the all text everywhere work if I'm not using any other font family?

What do you mean by the font file not being correct? Do you think it looks off?

I had a client download a free version of a font found/used in Canva and it was slightly different. Did you happen to purchase the font or download a free version?

I always highly, highly, highly recommend clients purchase the font for legal/security purposes too 👍😊

10 hours ago, dreyahbohlen said:

I had a client download a free version of a font found/used in Canva and it was slightly different. Did you happen to purchase the font or download a free version?

I always highly, highly, highly recommend clients purchase the font for legal/security purposes too 👍😊

This is Google's Crimson Text. 

Is it correct in chrome? It looks like a pseudo italic style is being applied to the italic font.

Try changing the code to this:

h1 em, h2 em, h3 em, h4 em, .sqsrte-large em, p em, .sqsrte-small em, em {
  font-family: Crimson Text Italic !important;
  font-style: normal !important;
}

Try this:

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

8 minutes ago, Ziggy said:

Try this:

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

I changed the code, but navigation and announcement bar are not changing. Any idea why?

This is all the code I have on fonts:

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

29 minutes ago, Aurora said:

I changed the code, but navigation and announcement bar are not changing. Any idea why?

The Announcement bar had no italic text so won't change.

The navigation italic is set via styles and hence doesn't use the em. Use this Custom CSS:

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

4 minutes ago, Ziggy said:

The Announcement bar had no italic text so won't change.

The navigation italic is set via styles and hence doesn't use the em. Use this Custom CSS:

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

Thanks so much, Ziggy!

The navigation is now picking up the italic style. It's such a relief to get that figured out!

I don't know why my brain was telling me that the announcement bar had italic text...

Do you still feel like there's anything wrong with the font file though? You've mentioned that yesterday.