Jump to content

Having trouble with custom CSS for fonts on Forms

Recommended Posts

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

 

Link to comment

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?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

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

Screenshot 2023-10-25 at 10.24.34 PM.png

Link to comment

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?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

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!

Link to comment

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".

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

@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. 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

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

 

Screenshot 2024-01-29 at 8.54.36 PM.png

Can you share link to this page?

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.