Custom Font in Newsletter Block Name fields

Site URL: https://www.aneesofficial.com

Hi there (hoping to hear from @tuanphan)

I wanted to ask y'all a question that I can't seem to find a resolution to:

• how can i use custom font in my newsletter block. The text in the name fields won't change no matter what code I try, nor will the text just above the name fields.

I use the Juke style within the Brine family. 

Thanks so much!!

Anees

.newsletter-block .newsletter-form-field-element::placeholder {
    font-family: tuanphan;
}

5m

Hey guys.

I've changed the button font on my newsletter block using the code below, but it throws out the height and alignment of the button. It now doesn't align with the white input field boxes on the left. Can anyone help? TY

.newsletter-block .newsletter-form-button {
  font-family: 'gaultier', sans-serif!important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

Hi @MakingWaves,
Please share your website URL.

Best,
Leopold

Quote

2 hours ago, IXStudio said:

Hi @MakingWaves,
Please share your website URL.

Best,
Leopold

https://elephant-falcon-8x4p.squarespace.com/ 🙂

16 hours ago, MakingWaves said:

 

What is access password?

1 hour ago, tuanphan said:

What is access password?

Sorry - it's vineyard

Hi

Use this code in Design -> Custom CSS

.newsletter-block .newsletter-form-button {
    max-height: 50px !important;
}

Please use the like button if it helps you!

Best,
Leopold

Hi, this code works! But the text in the button is still slightly closer to the top than I'd like. Any way to change the text positioning?

@marianaalvarado

Please post the URL for the page with the button.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

For sure, here is the website. Scroll all the way to the bottom for the newsletter block. 

And I've been trying to get my text fonts to match the rest of the website here is the code I've been using, somewhere in the code i can't get it to match. Screenshots below too, hope this is enough info! Thanks for the help!

.newsletter-block .newsletter-form-button {
  font-family: 'din condensed', normal!important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.newsletter-block .newsletter-form-button {
    max-height: 50px !important;
}
.newsletter-form-header-title {
    font-family: 'adobe garamond pro bold' !important;
  text-transform: none;
  weight: 700;
  style: normal;
  size: 70px;
}

for the heading text we use:

for the body text we use:

@marianaalvarado

Remove (make a copy somewhere) or comment out your previous CSS and add the following to Design > Custom CSS.

.newsletter-block .newsletter-form-header-title {

  font-family: adobe-garamond-pro;
  font-size: 70px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1em;
  text-transform: none;
  
  }

.newsletter-block .newsletter-form-header-description p {

  font-family: adobe-garamond-pro;
  font-size: 24px;
  line-height: 1.65em;
  
  }

.newsletter-block .newsletter-form-button {

  font-family: din-condensed-web;
  letter-spacing: 0.1em;
  
  }

Let us know how it goes.

This looks so much better! Thank you!

I don't understand why but the weight and text lines are not working-- still not bold or bigger text sixe. Any other work around?

@marianaalvarado

My bad I had a few errors in my previous CSS. I've updated it now. Please see my previous post.

Let us know how it goes.

No worries-- it worked, thank you!

 Last one! Still can't change the body text size. It's 15px right now and want to change it to 24px. I know my body text css is wrong, just can't figure it out. Thanks again! 

.newsletter-block .newsletter-form-header-title {

  font-family: adobe-garamond-pro;
  font-size: 70px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1em;
  text-transform: none;
  
  }

.newsletter-block .newsletter-form-body-text {

  font-family: adobe-garamond-pro;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1.65em;
  text-transform: none;
}
 
.newsletter-block .newsletter-form-button {

  font-family: din-condensed-web;
  letter-spacing: 0.1em;
  
  }

@marianaalvarado

I've updated the CSS in my previous post.

Let us know how it goes.

worked thanks!!!!

On 11/10/2020 at 7:11 AM, creedon said:

@marianaalvarado

I've updated the CSS in my previous post.

Let us know how it goes.

On 11/7/2020 at 6:01 AM, creedon said:

@marianaalvarado

Remove (make a copy somewhere) or comment out your previous CSS and add the following to Design > Custom CSS.

.newsletter-block .newsletter-form-header-title {

  font-family: adobe-garamond-pro;
  font-size: 70px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1em;
  text-transform: none;
  
  }

.newsletter-block .newsletter-form-header-description p {

  font-family: adobe-garamond-pro;
  font-size: 24px;
  line-height: 1.65em;
  
  }

.newsletter-block .newsletter-form-button {

  font-family: din-condensed-web;
  letter-spacing: 0.1em;
  
  }

Let us know how it goes.

Hello, this is very useful thank you. I would like to add the CSS code you have added above to my newsletter, but instead using the font Lato. Can I paste it below my current CSS code, like the picture below?
I want to ensure that this won't damage my site at all. Can I also change the code later without damaging the site?

Thanks in advance

1 hour ago, MantaTrust said:

Can I paste it below my current CSS code, like the picture below?
I want to ensure that this won't damage my site at all. Can I also change the code later without damaging the site?

You can paste it below your current code. If it doesn't work, you can remove it.

My code has no guarantees. Now or in the future. Once you paste it into your site there is no way I can control what you've done to it or what changes SS will make to their platform that may change how it worked when created. Such is the nature of custom code.

Also this code is pretty old so without being able to see your site there is no way we can know if the code will/can work.

3 minutes ago, creedon said:

You can paste it below your current code. If it doesn't work, you can remove it.

My code has no guarantees. Now or in the future. Once you paste it into your site there is no way I can control what you've done to it or what changes SS will make to their platform that may change how it worked when created. Such is the nature of custom code.

Also this code is pretty old so without being able to see your site there is no way we can know if the code will/can work.

Hello, thanks for getting back to me and for your info. That's good to know that I can remove it if necessary.
I realised it is not actually the newsletter block that I want to change the font for, but instead the email campaign font.
Would you know what code I would use to change the font on the marketing campaigns? Unfortunately their font options for the newsletters are very limited (just 3 fonts available)
Thanks in advance