Jump to content

Custom Font in Newsletter Block Name fields

Recommended Posts

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

Link to comment
  • 3 months later...

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

 

Screen Shot 2020-08-28 at 19.28.14.png

Link to comment
  • 2 months later...

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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:

755772088_headingfont.png.70403d2ea904df9454ed69d6e9710533.png

 

for the body text we use:

627465953_bodyfont.png.2ec189e079e39fe13857df10b41215cb.png

Edited by marianaalvarado
Link to comment

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

Edited by creedon
version 3 of CSS

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

 

Link to comment
  • 1 year later...
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

 

Screenshot 2022-10-18 at 12.17.56.png

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

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.