Jump to content

How to add custom font to Squarespace 7.1 checkbox in form

Recommended Posts

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

Screenshot 2023-03-06 at 5.56.55 PM.png

Edited by ThePromoTeam
Link to comment
  • Replies 10
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...

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

Screen Shot 2024-02-17 at 12.01.51 PM.png

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

Screen Shot 2024-02-17 at 12.01.51 PM.png

Can you share link to page where you use form?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.