How to add custom font to my squarespace site for headings and paragraphs

Please i am looking to change my site fonts to this HEADLINE & SUBHEADER
Sorren-Bold and BODY COPY
Gotham Medium

I have the fonts file however i dont know how to go about that but i know it can be possible with codes please help me solve this out , it's kinda urgent and very important to me

On 4/5/2024 at 8:58 PM, Shellyj said:

Please i am looking to change my site fonts to this HEADLINE & SUBHEADER
Sorren-Bold and BODY COPY
Gotham Medium

I have the fonts file however i dont know how to go about that but i know it can be possible with codes please help me solve this out , it's kinda urgent and very important to me

Hi, here's the code to upload a custom font. Update it with the name of the font, the link, and the format of the font file you uploaded (woff/woff2/otf/ttf)

@font-face {
  font-family: 'FONT NAME';
  src: url('LINK TO FONT') format('woff');
}

Then to change the header and paragraph fonts, add this code:

h1, h2, h3, h4 {
  font-family:'FONT NAME';
}

p, p.sqsrte-large, p.sqsrte-small {
  font-family:'FONT NAME';
}

I am not getting it please can you help insert the file link and name 

https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4b39a4c4f2306723259/1712383156026/%E2%98%9ESorren-Bold+400+%281%29.otf     for sorren-Bold

https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4c03103495397f4085f/1712383168265/Gotham-Medium.otf     Gotham-Medium 

Please help me and they are in otf I alreaded uploaded then in css on squarespace but i dont know how to procced everytging i try isn't working

This are the codes i use and i AM NOT SURE I GOT IT PLEASE HELP CORRECT IT 

@font-face {
  font-family: 'Sorren-Bold';
  src: url('https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4b39a4c4f2306723259/1712383156026/%E2%98%9ESorren-Bold+400+%281%29.otf') format('otf'),
}
h1, h2, h3, h4 {
  font-family:'Sorren-Bold';
}
@font-face {
  font-family: 'Gotham-Medium';
  src: url('https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4c03103495397f4085f/1712383168265/Gotham-Medium.otf') format('otf'),
}
p, p.sqsrte-large, p.sqsrte-small {
  font-family:'Gotham-Medium';
}

17 hours ago, Shellyj said:

This are the codes i use and i AM NOT SURE I GOT IT PLEASE HELP CORRECT IT 

@font-face {
  font-family: 'Sorren-Bold';
  src: url('https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4b39a4c4f2306723259/1712383156026/%E2%98%9ESorren-Bold+400+%281%29.otf') format('otf'),
}
h1, h2, h3, h4 {
  font-family:'Sorren-Bold';
}
@font-face {
  font-family: 'Gotham-Medium';
  src: url('https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4c03103495397f4085f/1712383168265/Gotham-Medium.otf') format('otf'),
}
p, p.sqsrte-large, p.sqsrte-small {
  font-family:'Gotham-Medium';
}

Hi, replace that code with this instead:

@font-face {
  font-family:'Sorren-Bold';
  src: url('https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4b39a4c4f2306723259/1712383156026/%E2%98%9ESorren-Bold+400+%281%29.otf');
}

@font-face {
  font-family:'Gotham-Medium';
  src: url('https://static1.squarespace.com/static/660f5e72b537d1457d9c75e4/t/6610e4c03103495397f4085f/1712383168265/Gotham-Medium.otf');
}

h1, h2, h3, h4 {
  font-family:'Sorren-Bold';
}

p, p.sqsrte-large, p.sqsrte-small {
  font-family:'Gotham-Medium';
}