Custom Fonts on Buttons/Forms

Page URL: https://studiotahini.squarespace.com/coachingsession-1

Hi there!

I've implemented CSS code for my custom font (see below).  However, the font and font style is not represented as expected in the top button (Contacto) and across the form.

Is there any way to modify the font style in the Button/Form specifically?

-

@font-face {
    font-family: Magazine Grotesque Regular;
    src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf);
}
@font-face {
    font-family: Magazine Grotesque Semi Bold;
    src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf);
}
.sqs-block-button-element {
  font-family: 'Magazine Grotesque Regular' !important;
}
button {
    font-family: Magazine Grotesque Regular !important;
}
a.btn.btn--border.theme-btn--primary-inverse {
    font-family: Magazine Grotesque Regular;
}
h1 {font-family: 'Magazine Grotesque Semi Bold';}
h2 {font-family: 'Magazine Grotesque Semi Bold';}
h3 {font-family: 'Magazine Grotesque Semi Bold';}
h4 {font-family: 'Magazine Grotesque Regular';}
p.sqsrte-large {font-family: 'Magazine Grotesque Regular';}
p {font-family: 'Magazine Grotesque Regular';}
p.sqsrte-small {font-family: 'Magazine Grotesque Regular';}
h1 {
  font-family: 'Magazine Grotesque Semi Bold';
  font-weight: 500;
  font-style: regular;
  font-size: 40px;
  letter-spacing: -0.01em;
  text-transform: ;
  line-height: 1.25em;
}
h2 {
  font-family: 'Magazine Grotesque Semi Bold';
  font-weight: 400;
  font-style: regular;
  font-size: 24px;
  letter-spacing: -0.01em;
  text-transform: ;
  line-height: 1,5em;
}
h3 {
  font-family: 'Magazine Grotesque Semi Bold';
  font-weight: 400;
  font-style: regular;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: ;
  line-height: 1em;
}
h4 {
  font-family: 'Magazine Grotesque Regular';
  font-weight: 400;
  font-style: regular;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: ;
  line-height: 1,15em;
}
p {
  font-family: 'Magazine Grotesque Regular';
  font-weight: 400;
  font-style: regular;
  font-size: 14px;
  letter-spacing: 0.025em;
  text-transform: ;
  line-height: 1.5em;
}
.header-nav *, nav.header-menu-nav-list * {
    font-family: Magazine Grotesque Regular;
    font-weight: 400;
      font-style: bold;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: ;
      line-height: 1em;
}
.Marquee * {
   font-family: Magazine Grotesque Regular;
   color:#333333;
   font-size: 18px;
}
.form-wrapper .field-list .title {
  font-family: Magazine Grotesque Regular;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .15em;
  text-transform: ;
}
#siteWrapper.site-wrapper .sqs-block-button-element {
    font-family: "Magazine Grotesque Regular" !important;
}
.newsletter-form-field-element{
border-radius: 20px;
border:1px solid #6E5C55!important
}

I'm also having this issue!

Header button (Contacto) should use this CSS code

a.btn {
    font-family: Magazine Grotesque Regular !important;
}

On 5/16/2024 at 12:40 AM, codyco said:

I'm also having this issue!

You can share link to your site, we can help easier

Perfect, thanks @tuanphan!

Do you know how I can also modify the font in the form fields?

On 5/27/2024 at 10:34 PM, one-over-four said:

Perfect, thanks @tuanphan!

Do you know how I can also modify the font in the form fields?

If all use same font, use this ID

div.form-block *, div.form-block *::placeholder

Page URL: https://studiotahini.squarespace.com/

Hi there!

I need to change the form ('Unete a la communidad') design, however, none of the updates I make within Site Styles > Forms are being reflected on the live site.

Is there any custom CSS I can add to:

1. Change the font design of the field captions and field inputs (inc. custom font used, font size, font letter spacing, font colour)
2. Change the field input box design

I've shared the existing custom CSS below for reference.

Thanks!

Christopher

-

@font-face {
    font-family: Creation;
    src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/666c51b24017d62b1f603b79/1718374834896/Creattion.otf);
}
@font-face {
    font-family: Magazine Grotesque Regular;
    src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf);
}
@font-face {
    font-family: Magazine Grotesque Semi Bold;
    src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf);
}
.sqs-block-button-element {
  font-family: 'Magazine Grotesque Regular' !important;
}
button {
    font-family: Magazine Grotesque Regular !important;
}
a.btn.btn--border.theme-btn--primary-inverse {
    font-family: Magazine Grotesque Regular;
}
h1 {font-family: 'Magazine Grotesque Regular';}
h2 {font-family: 'Magazine Grotesque Regular';}
h3 {font-family: 'Creation';}
h4 {font-family: 'Creation';}
p.sqsrte-large {font-family: 'Magazine Grotesque Regular';}
p {font-family: 'Magazine Grotesque Regular';}
p.sqsrte-small {font-family: 'Magazine Grotesque Regular';}
h1 {
  font-family: 'Magazine Grotesque Regular';
  font-weight: 500;
  font-style: regular;
  font-size: 55px;
  letter-spacing: -0.01em;
  text-transform: ;
  line-height: 1.25em;
}
h2 {
  font-family: 'Magazine Grotesque Regular';
  font-weight: 400;
  font-style: regular;
  font-size: 32.5px;
  letter-spacing: -0.01em;
  text-transform: ;
  line-height: 1,25em;
}
h3 {
  font-family: 'Creation';
  font-weight: 400;
  font-style: regular;
  font-size: 60px;
  letter-spacing: -0.01em;
  text-transform: ;
  line-height: 1em;
}
h4 {
  font-family: 'Creation';
  font-weight: 400;
  font-style: regular;
  font-size: 50px;
  letter-spacing: -0.0em;
  text-transform: ;
  line-height: 1,15em;
}
.sqsrte-large {
  font-family: 'Magazine Grotesque Regular';
  font-weight: 400;
  font-style: regular;
  font-size: 20px;
  letter-spacing: 0.0em;
  text-transform: ;
  line-height: 1.25em; 
}
p {
  font-family: 'Magazine Grotesque Regular';
  font-weight: 400;
  font-style: regular;
  font-size: 17px;
  letter-spacing: 0.0em;
  text-transform: ;
  line-height: 1.50em; 
}
.sqsrte-small {
  font-family: 'Magazine Grotesque Regular';
  font-weight: 400;
  font-style: regular;
  font-size: 14px;
  letter-spacing: 0.0em;
  text-transform: ;
  line-height: 1.0em; 
}
.header-nav *, nav.header-menu-nav-list * {
    font-family: Magazine Grotesque Regular;
    font-weight: 400;
      font-style: bold;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: ;
      line-height: 1em;
}
.Marquee * {
   font-family: Magazine Grotesque Regular;
   color:#333333;
   font-size: 18px;
}
.form-wrapper .field-list .title {
  font-family: Magazine Grotesque Regular;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .15em;
  text-transform: ;
}
#siteWrapper.site-wrapper .sqs-block-button-element {
    font-family: "Magazine Grotesque Regular" !important;
}
.newsletter-form-field-element{
border-radius: 20px;
border:1px solid #6E5C55!important
}
.newsletter-form-field-element{
    font-family: Magazine Grotesque Regular !important;
}
.form-field-element{
    font-family: Magazine Grotesque Regular !important;
}
a.btn {
    font-family: Magazine Grotesque Regular !important;
}

Hi @tuanphan,

Sorry for the late reply here!

Page URL: https://studiotahini.squarespace.com/

I've added the below custom code to change the font style used in the form (Unete a la communidad) towards the bottom of the page.  Whilst the main caption copy has been updated, the other copy still remains the same.

How do I change the font colour of the rest of the copy in this form?

Thanks,
Christopher

-----

div.form-block * {
    font-family: Magazine Grotesque Regular !important;
    font-weight: 500;
      font-style: bold;
      font-size: 15px;
      letter-spacing: 0em;
      text-transform: ;
      line-height: 0em;
    color: #F3F0EC;
}

Can you share link to page where you use form?

@tuanphan

Page URL: https://studiotahini.squarespace.com/

22 hours ago, one-over-four said:

@tuanphan

Page URL: https://studiotahini.squarespace.com/

The link doesn't work.

23 hours ago, one-over-four said:

Hi @tuanphan,

Sorry for the late reply here!

Page URL: https://studiotahini.squarespace.com/

I've added the below custom code to change the font style used in the form (Unete a la communidad) towards the bottom of the page.  Whilst the main caption copy has been updated, the other copy still remains the same.

How do I change the font colour of the rest of the copy in this form?

Thanks,
Christopher

-----

div.form-block * {
    font-family: Magazine Grotesque Regular !important;
    font-weight: 500;
      font-style: bold;
      font-size: 15px;
      letter-spacing: 0em;
      text-transform: ;
      line-height: 0em;
    color: #F3F0EC;
}

URL doesn't work. You try checking if you enabled page yet

Hi @tuanphan,

The page has been enabled (see attached image)!

Thanks,
Christopher

On 6/19/2024 at 2:20 AM, one-over-four said:

Hi @tuanphan,

The page has been enabled (see attached image)!

Thanks,
Christopher

I see font-family already works, can you describe in detail problem?

https://studiotahini.squarespace.com/

Hi @tuanphan,

When you go down to the form (see attached image), there's a couple issues:

1. Some of the copy appears in brown when it should be #FFFFFF
2. When you add a value in the field (the Nombre box, for instance), you can't see the copy.  It's too small.

Thanks,

Christopher

It should now work @tuanphan, once cache has been cleared.

20 hours ago, one-over-four said:

It should now work @tuanphan, once cache has been cleared.

I see you used this code & it already work

Hi @tuanphan,

As you can see in the attached image, there's still a couple issues:

1. The field font is brown, not #FFFFFF
2. The input font is so small you can't even see it

What needs to change in the code to make these updates?

On 6/26/2024 at 4:36 PM, one-over-four said:

Hi @tuanphan,

As you can see in the attached image, there's still a couple issues:

1. The field font is brown, not #FFFFFF
2. The input font is so small you can't even see it

What needs to change in the code to make these updates?

 

#1. You can use this CSS code

span.description.required {
    color: #fff !important;
    opacity: 1 !important;
}

.field label * {
    color: #fff !important;
}

#2. Use this CSS code

div.form-block div.field input, div.form-block div.field input::placeholder {
    font-size: 20px !important;
}