How to add custom font to Squarespace 7.1 checkbox in form

Hi everyone, 

I'm seeking assistance in getting the correct code to apply a custom font to the checkbox field in Squarespace 7.1

https://plums-quillfish-98s9.squarespace.com

Password: Test

I used the following code to successfully applied the custom font to the title, description, field elements, etc., but not the checkbox text. Any insight would be greatly appreciated.
 

// Form Titles - Change font //
.form-wrapper .field-list .title {  
  font-family: 'Paulaner1634-Regular'!important;
}

// Form Captions - Change font //
.form-wrapper .field-list .field .caption { 
  font-family: 'Paulaner1634-Regular'!important;
}

// Form Fields - Change font //
.form-wrapper .field-list .field .field-element { 
  font-family: 'Paulaner1634-Regular'!important;
}

// Form Descriptions - Change font //
.form-wrapper .field-list .description { 
  font-family: 'Paulaner1634-Regular'!important;

}// Form checkboxes - Change font //
.form-wrapper .field-list .field .options {
  font-family: 'Paulaner1634-Regular' !important;
}

Hi all. 

I've been working on tweaking the script I'm using. Using the following modified code, I corrected the issue with the font in the Entry Form. Now, the "Semibold" font is not loading correctly for the h1 - h4 titles. 

Any assistance is appreciated. 🙏

/* Add Paunaler Font */
@font-face {
font-family: Paulaner1634-Semibold;
src: url('https://static1.squarespace.com/static/637bee237b07b31b6a2f4942/t/637cde1e54567d45d48680e9/1669127710893/Paulaner1634-SemiBold.otf');
}
@font-face {
font-family: Paulaner1634-Regular;
src: url('https://static1.squarespace.com/static/63f7a6c1c2a41b6376d44804/t/63f7d1af4ccef11aa505c236/1677185455050/Paulaner1634-Regular.otf');
}
/* Assign Paunaler Font */
h1 {
font-family: 'Paulaner1634-Semibold';
}
h2 {
font-family:'Paulaner1634-Semibold';
}
h3 {
font-family: 'Paulaner1634-Semibold';
}
h4 {
font-family: 'Paulaner1634-Semibold';
}
.sqsrte-large {
font-family: 'Paulaner1634-Semibold';
}
p {
font-family: 'Paulaner1634-Regular';
}

.sqsrte-small {
font-family: 'Paulaner1634-Regular';
}

*, body {
 font-family: 'Paulaner1634-Regular'!important;
}

h1, h2, h3, h4 {
 font-family: 'Paulaner1634-Semibold'!important;
}

On 3/9/2023 at 5:19 AM, ThePromoTeam said:

Hi all. 

I've been working on tweaking the script I'm using. Using the following modified code, I corrected the issue with the font in the Entry Form. Now, the "Semibold" font is not loading correctly for the h1 - h4 titles. 

Any assistance is appreciated. 🙏

 

/* Add Paunaler Font */
@font-face {
font-family: Paulaner1634-Semibold;
src: url('https://static1.squarespace.com/static/637bee237b07b31b6a2f4942/t/637cde1e54567d45d48680e9/1669127710893/Paulaner1634-SemiBold.otf');
}
@font-face {
font-family: Paulaner1634-Regular;
src: url('https://static1.squarespace.com/static/63f7a6c1c2a41b6376d44804/t/63f7d1af4ccef11aa505c236/1677185455050/Paulaner1634-Regular.otf');
}
/* Assign Paunaler Font */
h1 {
font-family: 'Paulaner1634-Semibold';
}
h2 {
font-family:'Paulaner1634-Semibold';
}
h3 {
font-family: 'Paulaner1634-Semibold';
}
h4 {
font-family: 'Paulaner1634-Semibold';
}
.sqsrte-large {
font-family: 'Paulaner1634-Semibold';
}
p {
font-family: 'Paulaner1634-Regular';
}

.sqsrte-small {
font-family: 'Paulaner1634-Regular';
}

*, body {
 font-family: 'Paulaner1634-Regular'!important;
}

h1, h2, h3, h4 {
 font-family: 'Paulaner1634-Semibold'!important;
}

Change this line

*, body {
 font-family: 'Paulaner1634-Regular'!important;
}

to this

*:not(h1):not(h2):not(h3):not(h4), body {
 font-family: 'Paulaner1634-Regular'!important;
}

@tuanphan

I appreciate your response and assistance.

I will reload the Semibold and address it not loading correctly.

Ricardo

On 3/21/2023 at 8:24 PM, ThePromoTeam said:

@tuanphan

I appreciate your response and assistance.

I will reload the Semibold and address it not loading correctly.

Ricardo

You mean the code still doesn't work? Can you share link to a page where we can see h1 or h2/h3/h4? We can check it again easier