How to add a custom font on Squarespace 7.1

Hey! So I did some digging and found a way to use a custom font for Squarespace 7.1. Squarespace definitely has tons of fonts to choose from - but some of you may want this option so you can use your favorite font. Check it out below:

Hello! I like how simple you made this via copy/paste and easy code. It was all working well until Squarespace told me there was too much text and I had to remove some in order to save. Have you ever run into this issue, and if so, any ideas on how to solve it? (For context, I was uploading three font weights, same family.)

Hi, thank you! I hate when that happens, unfortunately I haven't found a solution for it yet. You may want to only import the lightest and heaviest weight for now. 🙂

Hey Tori! This video was excellent.  It worked like a charm!  Can you tell me how to apply it to a paragraph section?  I tried P1 and P2 for paragraph sections, but those variables didn't work.  Thanks!

Update: Just figured out that you can only edit all paragraph font.  You can't customize for paragraph 1, 2, and 3.  Just simply put <p> in place of <h1> etc.  

22 hours ago, KNicole said:

Hey Tori! This video was excellent.  It worked like a charm!  Can you tell me how to apply it to a paragraph section?  I tried P1 and P2 for paragraph sections, but those variables didn't work.  Thanks!

 

Update: Just figured out that you can only edit all paragraph font.  You can't customize for paragraph 1, 2, and 3.  Just simply put <p> in place of <h1> etc.  

You can customize p1 & p2. if you still want this, I can give the code.

@tuanphan Can you show us how to customize just p1. 

Hi, I put this code into css (7.1) , but it doesn't work:

@font-face {    
font-family: 'DIN Next Rounded LT W041448969';       
src: url('https://static1.squarespace.com/static/5f71b8cca49b5d4c23cea2a7/t/5f71bb4f0a75e61a51deba2b/1601289040259/ddfe8678-9044-401c-be1c-b4d9d8669509.woff');  }

* {
    font-family: DIN Next Rounded LT W041448969 !important
}

can you help me. Thanks, Christoph

On 10/6/2020 at 2:15 AM, christoph_blank said:

Hi, I put this code into css (7.1) , but it doesn't work:

@font-face {    
font-family: 'DIN Next Rounded LT W041448969';       
src: url('https://static1.squarespace.com/static/5f71b8cca49b5d4c23cea2a7/t/5f71bb4f0a75e61a51deba2b/1601289040259/ddfe8678-9044-401c-be1c-b4d9d8669509.woff');  }

* {
    font-family: DIN Next Rounded LT W041448969 !important
}

can you help me. Thanks, Christoph

 

* {
	font-family: ''DIN Next Rounded LT W041448969' !important;
}

On 10/6/2020 at 2:15 AM, christoph_blank said:

Hi, I put this code into css (7.1) , but it doesn't work:

@font-face {    
font-family: 'DIN Next Rounded LT W041448969';       
src: url('https://static1.squarespace.com/static/5f71b8cca49b5d4c23cea2a7/t/5f71bb4f0a75e61a51deba2b/1601289040259/ddfe8678-9044-401c-be1c-b4d9d8669509.woff');  }

* {
    font-family: DIN Next Rounded LT W041448969 !important
}

can you help me. Thanks, Christoph

 

Use this

* {
	font-family: 'DIN Next Rounded LT W041448969' !important;
}

What is the code to customize P1 and P2?

Can you customize the Monospace font?

On 12/17/2020 at 1:44 AM, CR-Colorado said:

What is the code to customize P1 and P2?

 

Can you customize the Monospace font?

Use this code

/* p1 */
p.sqsrte-large {
    font-family: futura-pt;
}
/* p2 */
p {
    font-family: monospace;
}
/* p3 */
p.sqsrte-small {
    font-family: fantasy;
}

@tuanphan

what is the css for customizing the font on the Title for a People section?

On 1/28/2022 at 2:47 AM, wearecreamsugar said:

@tuanphan

what is the css for customizing the font on the Title for a People section?

Can you share link to page where you have people section?

What is the code to customize Miscellaneous text?

On 5/4/2022 at 5:53 AM, PAU said:

What is the code to customize Miscellaneous text?

Can you share link to a page where you use text? We can help easier