Jump to content

Font looks different on website than it looks on Canva

Go to solution Solved by Ziggy,

Recommended Posts

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!

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Link to comment
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;}

Link to comment

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:

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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...

Edited by Aurora
Link to comment
1 minute ago, Aurora said:

And leave the code I already have as it is?

Of course.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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...

Edited by Aurora
Link to comment
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;}

Link to comment
  • Solution

It looks like an important would do the trick:

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Edited by Aurora
Link to comment
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. 

Link to comment

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
24 minutes ago, Ziggy said:

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

 

Ziggy, thanks!

I changed the code, and now the font looks the same on both browsers.

It looks like Crimson Text, wouldn't you agree? (see first two screenshots)

However, I noticed that it looks a bit crooked when I only put part of a sentence in italics, like on the above the fold. (see third screenshot) Is that typical?

I still have the problem that not all the font on the website is being affected. Navigation and announcement bar are some places that I'm aware of. Is it possible to target all text everywhere, like I did for the regular style, as long as I'm only using one font family on the entire site:

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

Bildschirmfoto 2023-11-03 um 09.42.04.png

Bildschirmfoto 2023-11-03 um 09.53.19.png

Bildschirmfoto 2023-11-03 um 09.54.30.png

Link to comment

Try this:

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.