Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Having Trouble Changing Fonts with CSS


Question

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 post
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

21 answers to this question

Recommended Posts

  • 0

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)

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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

Link to post
  • 0

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

Link to post
  • 0
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 post
  • 0

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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

Edited by mandelbaummarketing
Link to post
  • 0
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 post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...