Jump to content

Having Trouble Changing Fonts with CSS

Recommended Posts

Site URL: https://sunfish-bobcat-m5pn.squarespace.com/

I am trying to change my font to Caviar Dreams Bold using the Hester layout, and it's not working. 

I am going into Design > Custom CSS > Manage Custom Files > uploading "CaviarDreams_Bold"

Then I'm using the following code:

@font-face {

    font-family: 'CaviarDreams_Bold';

       src:'https://static1.squarespace.com/static/5f70e7b4f441fc6382c229d7/t/5f984d28d716563034e425cb/1603816745783/CaviarDreams_Bold.ttf';

  }

h2 {font-family: 'CaviarDreams_Bold'}
h3 {font-family: 'CaviarDreams_Bold'}
h4 {font-family: 'CaviarDreams_Bold'}
p1 {font-family: 'CaviarDreams_Bold'}

*It actually is changing the font, but it's not the right font; I've uploaded what it looks like, and what it's supposed to look like (look at the "e" and you'll see

Screen Shot 2020-10-27 at 12.41.03 PM.png

Screen Shot 2020-10-27 at 12.41.13 PM.png

Link to comment
  • Replies 21
  • Views 1.5k
  • Created
  • Last Reply

Your code is invalid, use this new code

@font-face {
    font-family: 'CaviarDreams_Bold';
    src: url(https://static1.squarespace.com/static/5f70e7b4f441fc6382c229d7/t/5f984d28d716563034e425cb/1603816745783/CaviarDreams_Bold.ttf);
}
h2, h3, h4, p {
    font-family: 'CaviarDreams_Bold' !important;
}

(There is no p1, p2, p3... tag)

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
On 10/28/2020 at 9:23 AM, tuanphan said:
On 10/28/2020 at 9:23 AM, tuanphan said:

Your code is invalid, use this new code



@font-face {
    font-family: 'CaviarDreams_Bold';
    src: url(https://static1.squarespace.com/static/5f70e7b4f441fc6382c229d7/t/5f984d28d716563034e425cb/1603816745783/CaviarDreams_Bold.ttf);
}
h2, h3, h4, p {
    font-family: 'CaviarDreams_Bold' !important;
}

(There is no p1, p2, p3... tag)

thank you!

 

 

Link to comment
On 10/28/2020 at 9:23 AM, tuanphan said:

Your code is invalid, use this new code


@font-face {
    font-family: 'CaviarDreams_Bold';
    src: url(https://static1.squarespace.com/static/5f70e7b4f441fc6382c229d7/t/5f984d28d716563034e425cb/1603816745783/CaviarDreams_Bold.ttf);
}
h2, h3, h4, p {
    font-family: 'CaviarDreams_Bold' !important;
}

(There is no p1, p2, p3... tag)

Is there a way to add a custom font for buttons???

Link to comment

what I learned from doing this a couple of times: there are a lot of different classes you need to address like (buttons, contact form, image  block text, footer navigation etc.. ....). Depending on how detailed you want to switch the fonts, it's a good start using a system font that is as close as possible and focus on the main text classes with CSS

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment
1 hour ago, ArminB said:

what I learned from doing this a couple of times: there are a lot of different classes you need to address like (buttons, contact form, image  block text, footer navigation etc.. ....). Depending on how detailed you want to switch the fonts, it's a good start using a system font that is as close as possible and focus on the main text classes with CSS

my client is insisting on using her font, so i need to find out if theres a way to force the button font to be the same

Link to comment

Replace MONTSERRAT-LIGHT with your font name

/* Button custom font */
/* Header button */
a.btn {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* Buttons */
a.sqs-block-button-element {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* image block button */
.image-button-inner a {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* newsletter button */
span.newsletter-form-button-label {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* form button */
input.button.sqs-system-button.sqs-editable-button {
    font-family: 'MONTSERRAT-LIGHT' !important;
}

 

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
9 hours ago, tuanphan said:

Replace MONTSERRAT-LIGHT with your font name



/* Button custom font */
/* Header button */
a.btn {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* Buttons */
a.sqs-block-button-element {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* image block button */
.image-button-inner a {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* newsletter button */
span.newsletter-form-button-label {
    font-family: 'MONTSERRAT-LIGHT' !important;
}
/* form button */
input.button.sqs-system-button.sqs-editable-button {
    font-family: 'MONTSERRAT-LIGHT' !important;
}

 

thank you!!!

final issues (i hope):

on the newsletter button, the change works, but there's still the text in the field that is a different font. is there any way to change this, too? (see attached)

also, what about forms? this is still the wrong font, too. is there a way to overwrite this? 

thanks again! you've been a lifesaver, and this has been such a learning experience.

Screen Shot 2020-11-03 at 10.24.32 AM.png

Screen Shot 2020-11-03 at 10.25.43 AM.png

Link to comment
On 11/3/2020 at 9:59 AM, mandelbaummarketing said:

thank you!!!

final issues (i hope):

on the newsletter button, the change works, but there's still the text in the field that is a different font. is there any way to change this, too? (see attached)

also, what about forms? this is still the wrong font, too. is there a way to overwrite this? 

thanks again! you've been a lifesaver, and this has been such a learning experience.

Screen Shot 2020-11-03 at 10.24.32 AM.png

Screen Shot 2020-11-03 at 10.25.43 AM.png

is there a way to fix the forms font, or the font in the Email field in the newsletter signup?

Link to comment
On 11/3/2020 at 9:59 PM, mandelbaummarketing said:

thank you!!!

final issues (i hope):

on the newsletter button, the change works, but there's still the text in the field that is a different font. is there any way to change this, too? (see attached)

also, what about forms? this is still the wrong font, too. is there a way to overwrite this? 

thanks again! you've been a lifesaver, and this has been such a learning experience.

Add to Home > Design > Custom CSS

input::placeholder {
    font-family: 'Fanwood' !important;
}

 

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
On 11/7/2020 at 12:19 AM, mandelbaummarketing said:

I want all the fonts to be the same on the contact form, as well, yes. Thanks!

 
  •  

Add to Home > Design > Custom CSS

/* Contact form custom font */
.form-wrapper * {
    font-family: 'CaviarDreams_Bold' !important;
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.