Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 776
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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

 

Edited by Jia

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment

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

 

Link to comment

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

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

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

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.