Custom Contact Form

Hello all,

this is my contact form - https://www.wolk.studio/contact  

As you can see the CSS does not effect the (required) font size and the captions for some strange reason. Here is the current CSS:

//CONTACT FORM
// For the Form
@font-face {font-family:TabletGothic; src:url(https://static1.squarespace.com/static/65a4f0d085c986465cc1e281/t/65a7d0831d1fbf08554873ab/1705496707549/Tablet+Gothic+Compressed+W02Th.ttf)
}

.form-wrapper .field-list .title {  
  font-family: TradeGothic;  
  font-size: 5px;
  color: #000000;  
  letter-spacing: .10em;   
  text-transform: none;
}

.form-wrapper .field-list .description {
    font-family: TradeGothic; 
    font-size: 5px; 
    color: #000;
    letter-spacing: .1em; 
    text-transform: none;
}

.form-wrapper .field-list .field .caption {
  font-size:5px;
  font-family:'TradeGothic';
  color:none;
}

I am want to make it look like this one

Thank you in advance.

Hi @ggimishev 1st thing I notice is that your font-family names are not the same. 

In @font-face where you have loaded your font file, you called it TabletGothic.

In the following CSS, you called it TradeGothic.

Try aligning those and see if it helps.

I have a guide on Top 5 reasons why custom font is not working in SquareSpace. Not matching font-family is #1. If that doesn't work, try working through the rest of the guide to see if it helps.

Let me know how it goes.

4 hours ago, melody495 said:

Hi @ggimishev 1st thing I notice is that your font-family names are not the same. 

In @font-face where you have loaded your font file, you called it TabletGothic.

In the following CSS, you called it TradeGothic.

Try aligning those and see if it helps.

I have a guide on Top 5 reasons why custom font is not working in SquareSpace. Not matching font-family is #1. If that doesn't work, try working through the rest of the guide to see if it helps.

Let me know how it goes.

Hello @melody495,

not the font family name is the problem. The resizing of the font also does not work. It must be something with the CSS selector idk.

12 hours ago, ggimishev said:

 It must be something with the CSS selector idk.

You are right. You can check the CSS selector from the Inspect tool.

Here is what I see for your contact form. You have selectors for .form-wrapper and .field-list, then you need to target relevant ones to apply your CSS styling to. I have highlighted the ones that you seem to want to target.