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

Hello everyone!

I've been trying to update the fonts for each element in my forms. I used the above code, but it is only changing the fonts for the Title and Description. The Caption, Input and Options aren't changing. I've included the exact code below as well as an image to show the issue - only the Chartreuse font has changed, but I need the Cream and Butterscotch fonts to change also. If anyone can help, I would appreciate it! Thank you!

.form-wrapper .field-list .title {  
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .field .caption { 
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .field .field-element { 
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .description { 
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .field .options {
  font-family: 'sofia-pro' !important;
}

On 2/18/2024 at 12:09 AM, Genevieve32 said:

Hello everyone!

I've been trying to update the fonts for each element in my forms. I used the above code, but it is only changing the fonts for the Title and Description. The Caption, Input and Options aren't changing. I've included the exact code below as well as an image to show the issue - only the Chartreuse font has changed, but I need the Cream and Butterscotch fonts to change also. If anyone can help, I would appreciate it! Thank you!

 

.form-wrapper .field-list .title {  
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .field .caption { 
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .field .field-element { 
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .description { 
  font-family: 'sofia-pro'!important;
}

.form-wrapper .field-list .field .options {
  font-family: 'sofia-pro' !important;
}

Can you share link to page where you use form?

It's not published yet - does that matter?

On 2/21/2024 at 2:20 AM, Genevieve32 said:

It's not published yet - does that matter?

You can setup an access password

I published the site - here is the page:

https://www.planetpodge.studio/contact

On 2/27/2024 at 9:39 PM, Genevieve32 said:

I published the site - here is the page:

https://www.planetpodge.studio/contact

You can use this CSS code

div#block-c97133c28177a9cd35a2 *, div#block-c97133c28177a9cd35a2 *::placeholder, div#block-c97133c28177a9cd35a2 *:focus {
    font-family: 'sofia-pro'!important;
}