Import Italic version of your font

Hi everyone! So, I have this custom font that comes in Regular and Italic. I want to be able to write stylized paragraphs on the website that look like the attached photo — seamlessly switching between both Regular and Italic. 

Yes, Squarespace will italicize it for me, but the way the website does it isn't nearly as good-looking as the italic font that I purchased.

Is there a way to code my website so that when I'm in the style bar, I can click the 'I' button and it places the corresponding Italic text in there automatically?

Thanks for any advice or tips in advance!!

Yes, this is possible, when setting up your custom font you can add both the regular and italics, reference them both, and assign the italic font to that style, eg:

@font-face {
  font-family:'YOUR_FONT';
  src:'your-source-url-here-font';
}
@font-face {
  font-family:'YOUR_FONT_ITALIC';
  src:'your-source-url-here-italic-font';
}

p {
  font-family:'YOUR_FONT';
}

p i {
  font-family:'YOUR_FONT_ITALIC';
}

If you share some specifics I can give you actual code rather than example.

Hi Ziggy,

I've tried to do that but I can't get it to work, I've attached what I've done below - am I missing anything?

Thank you!

@font-face{
  font-family:"Editors-Note";
src:
url(https://static1.squarespace.com/static/61adfbcfd01b703db09ac943/t/6633a17aa1264248c5fb214b/1714659707010/Editor%27sNote-Light.otf)}h1,h2,h3,h4,{font-family:"Editors-Note"!important}code, time, .blog-meta-section a{font-family:"Breathing"!important}

@font-face{
  font-family:"Editors-Note-Italic";
  src:   url(https://static1.squarespace.com/static/61adfbcfd01b703db09ac943/t/66ce4ea750773b1df49ae5d5/1724796583677/Editor%27sNote-LightItalic.otf)}hi1,hi2,hi3,hi4 {font-family:"Editors-Note-Italic"!important}

10 hours ago, emilymcareavey said:

am I missing anything?

You have a number of errors that I can help with:

@font-face{
  font-family: 'Editors-Note';
  src:url(https://static1.squarespace.com/static/61adfbcfd01b703db09ac943/t/6633a17aa1264248c5fb214b/1714659707010/Editor%27sNote-Light.otf);
}
h1, h2, h3, h4 {
  font-family: 'Editors-Note' !important;
}
code, time, .blog-meta-section a {
  font-family: 'Breathing' !important;
}

@font-face{
  font-family:'Editors-Note-Italic';
  src:url(https://static1.squarespace.com/static/61adfbcfd01b703db09ac943/t/66ce4ea750773b1df49ae5d5/1724796583677/Editor%27sNote-LightItalic.otf);
}
h1 i, h2 i, h3 i, h4 i, h1 em, h2 em, h3 em, h4 em {
  font-family:'Editors-Note-Italic'!important;
}

Have you uploaded this font as well? "Breathing"

Thank you so much for you help! All fixed now! And yes I have Breathing uploaded 🙂

15 minutes ago, emilymcareavey said:

Thank you so much for you help! All fixed now! And yes I have Breathing uploaded 🙂

Excellent! Can you mark my post as the solution and give it a like? Thanks!

How do I mark as solution?

Hi Ziggy,

I've also noticed for whatever reason the italic version is showing up much more slanted on the website than it does in Canva or in the original italic file - do you know why that may be?

9 minutes ago, emilymcareavey said:

I've also noticed for whatever reason the italic version is showing up much more slanted on the website than it does in Canva or in the original italic file - do you know why that may be?

Add this to the font properties for the italic version:

font-style: normal;

Thank you!