Having Trouble Changing Fonts with CSS

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

Your site require a password to access. Other developers will need to this to be able to review your site for further assistance.

5 minutes ago, MoltoBello said:

Your site require a password to access. Other developers will need to this to be able to review your site for further assistance.

i made it public

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)

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!

 

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???

15 minutes ago, mandelbaummarketing said:

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

And what about the navigation?

16 hours ago, mandelbaummarketing said:

And what about the navigation?

Which button?

WIth navigation

header#header * {
    font-family: 'CaviarDreams_Bold';
}

23 minutes ago, tuanphan said:

Which button?

WIth navigation

header#header * {
    font-family: 'CaviarDreams_Bold';
}

 

youre amazing, thank you. i mean for all the buttons on the site -- theyre still using the original font cause we havent used CSS to overwrite it

22 hours ago, tuanphan said:

Which button?

WIth navigation

header#header * {
    font-family: 'CaviarDreams_Bold';
}

 

do you know the code for buttons???

23 hours ago, tuanphan said:

 

header#header * {
    font-family: 'CaviarDreams_Bold';
}

 

do i need to do this for the footer, too? if so, is it:

footer#footer * {
    font-family: 'CaviarDreams_Bold';
}

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

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

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

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.

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.

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

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

5 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

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

 

i added this, but the contact form still looks the same

above code for newsletter form.

You want field title on contact form?

1 hour ago, tuanphan said:

above code for newsletter form.

You want field title on contact form?

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

3 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

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

 

thank you!