Having trouble with custom CSS for fonts on Forms

Hi!

I am not a coder and have basically been picking up custom CSS posted by others to do some light font customization on my new site.

I have custom fonts installed (working great on most of the site!) and am just struggling with my forms. The "Editable Button" code is working, but the "Title" and "Caption" are not even with all of those importants, and I don't even know where to begin for code for the actual form areas where people would type. If any wonderful expert could offer me the custom CSS I need to input to fix this I would so appreciate it!

https://jessica-mcsweeney-0.squarespace.com/contact

PW: bertie412

This is my code:

.sqs-block-form .field-list .title {
    font-family: Cardinal Fruit;
    font-weight: 300 !important;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height:1.8em;
    font-size: 18px !important;
    color: #000000;
    }

.sqs-block-form .field-list .caption {
    font-family: Apercu !important;
    font-weight: 300 !important;
    font-style: normal !important;
    letter-spacing: 0em !important;
    text-transform: none !important;
    line-height: 1.8em !important;
    font-size: 14px !important;
    color: #000000;
    }

.sqs-block-form .sqs-editable-button {
    font-family: Apercu Mono !important;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em;
    padding: 10px 25px !important;
    font-size: 1rem !important;
    color: white;
    background-color: #F48264 !important;
}

Can you post a screenshot of the form on your website, and scribble on it which you are having trouble with and what font family?

Have you already installed those 3 font families from your code blocks?

@melody495 of course!

So I've installed the font families without any issue - they are working elsewhere on the site as my header, paragraph, and monotype fonts.

The title font is "Your Name," "Company Name," etc. (weirdly on my back-end these look correct, but on the screenshot below and on a browser I'm not logged in on they show up as Times New Roman - not sure if a cache thing).

The caption font is "required" and "First Name/Last Name" which are showing up as like, a Helvetica type font.

The description font (where it lists pronoun examples) is working correctly.

I've attached the photo of what is showing up on a browser where I'm not logged in.

Also uploading all my custom font CSS if it's helpful!:

@font-face {
  font-family: 'Cardinal Fruit Regular';
  src:
    url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c3069f0aad10c9c85bed6/1697394793179/cardinalfruitweb-regular.woff2')    format('woff2'),
    
       url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c2f2b9a2b263a8403c34b/1697394475960/cardinalfruitweb-regular.woff') format('woff');
}

@font-face {
  font-family: 'Cardinal Fruit Italic';
  src:
    url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c2f2bdbc2ad06c2417dbf/1697394475933/cardinalfruitweb-italic.woff2')    format('woff2'),
    
       url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c2f2c523f01347b37a2c3/1697394476037/cardinalfruitweb-italic.woff') format('woff');
}

@font-face {
  font-family: 'Apercu';
  src:
    url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c2f18c53ec1663f56fb3e/1697394456630/apercu-regular.woff2')    format('woff2'),
    
       url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c2f184f59b0633cace8c3/1697394456609/apercu-regular.woff') format('woff'),
    
       url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c2f18082ceb5019832b33/1697394456585/apercu-regular.ttf')  format('truetype');
}

@font-face {
  font-family: 'Apercu Mono';
  src:
    url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c36345285c047c4e18330/1697396276554/apercu-mono-regular.woff2')    format('woff2'),
    
       url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c36343005015f41adad40/1697396276544/apercu-mono-regular.woff') format('woff'),
    
       url('https://static1.squarespace.com/static/652c20604600df662d43aa3e/t/652c36343005015f41adad3f/1697396276523/apercu-mono-regular.ttf')  format('truetype');
}
/*------------------------------------
 *  Headings and paragraphs
 *------------------------------------*/
 
h1 {
font-family: 'Cardinal Fruit Regular'!important;}

h2 {
font-family: 'Cardinal Fruit Regular'!important;}

h3 {
font-family: 'Cardinal Fruit Italic'!important;}

h4 {
font-family: 'Cardinal Fruit Italic'!important;}

.sqsrte-large {
font-family: 'Cardinal Fruit Regular'!important;}

p:not(.sqsrte-large, .sqsrte-small){
font-family: 'Apercu'!important;}

.sqsrte-small {
font-family: 'Apercu'!important;}

/* monospace */
pre code {
    font-family: 'Apercu Mono' !important;
}

.header-nav *, nav.header-menu-nav-list * {
    font-family: Cardinal Fruit Regular;
}

.sqs-block-button-element {
  font-family: 'Apercu Mono' !important;
}

header#header a.btn {
    font-family: Apercu Mono !important;
   
}

.sqs-block-form .field-list .title {
    font-family: Cardinal Fruit;
    font-weight: 300 !important;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height:1.8em;
    font-size: 18px !important;
    color: #000000;
    }

.sqs-block-form .field-list .caption {
    font-family: Apercu !important;
    font-weight: 300 !important;
    font-style: normal !important;
    letter-spacing: 0em !important;
    text-transform: none !important;
    line-height: 1.8em !important;
    font-size: 14px !important;
    color: #000000;
    }

.sqs-block-form .sqs-editable-button {
    font-family: Apercu Mono !important;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em;
    padding: 10px 25px !important;
    font-size: 1rem !important;
    color: white;
    background-color: #F48264 !important;
}

Hi, your css uses Cardinal Fruit for the .title, but you don't have a custom font for that. You have Cardinal Fruit Regular and Italic installed.

Can you change that and see?

Hi!

Wow, I am dumb haha -- that totally fixed the title section, but the "caption" where First Name/Last Name and Required are is Apercu and still isn't working (and that is what Apercu is named).

I did note that if I replace all this code with the below to change it all to Apercu, that works (but I'd prefer to have a mix of fonts). So I'm not sure if it's just something in my code being wrong or if something with Squarespace's settings isn't being overridden?

div.form-block * {
    font-family: Apercu !important;
}

Thank you so much!

It happens! Change the below to new line

.sqs-block-form .field-list .caption {

to 

.sqs-block-form .field-list .caption-text {

"Required" is part of the "Your Name" title. Best to move the text "Required" to after "First Name" and "Last Name", so you can set the font.

Edit: so type "First Name (required)" and "Last Name (required)". and remove from "Your Name".

@melody495 Thank you so much -- I just wanted to say you've been incredibly helpful and with that code fix + playing around with the Inspect tool I was able to figure out all of my form font issues! Sending you a coffee and so appreciate you!

@socialjessie You are very welcome! Happy it's all working for you 😊 and thank you, you're too kind!

If you can mark one of my answers as the solution, it'll help others. 

Hello,

I have injected codes for the title and caption to match my custom font, but unsure about how to change the sections circled in my photo below as well as the text of the submission. Can anyone advise? 

On 1/30/2024 at 11:56 AM, Angchen37 said:

Hello,

I have injected codes for the title and caption to match my custom font, but unsure about how to change the sections circled in my photo below as well as the text of the submission. Can anyone advise? 

 

Can you share link to this page?