Jump to content

Adding a customize font for buttons and hover for buttons

Recommended Posts

Site URL: https://octagon-triceratops-czm6.squarespace.com/

Hello,

1. How can I customize my buttons fonts to a font that's not in the library and add a change of colour for the buttons hover. I've tried different css codes I found online but nothing works

Font I want to use for buttons: Primus Regular ( PrimusRegular.ttf )
Colour I want the buttons to change on Hover: #31ddd9


2. How can I change my paragraph and title fonts to  fonts that are not in the library and use that on my site styles (so that they work for "list" texts" and everything else

Font I want to use for Titles: Primus Regular ( PrimusRegular.ttf )
Font I want to use for paragraph : Hind Siliguri

Thanks!

Edited by rio9
Added another question I had
Link to comment
  • Replies 5
  • Views 380
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

div#page-section-6234f84c6335325ec2f1f52f .button-block a:hover {
    background-color: #31ddd9 !important;
}
.user-items-list .list-section-title p {
    font-family: 'primus';
}
h2.list-item-content__title {
    font-family: 'primus' !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
14 hours ago, tuanphan said:

Add to Design > Custom CSS

div#page-section-6234f84c6335325ec2f1f52f .button-block a:hover {
    background-color: #31ddd9 !important;
}
.user-items-list .list-section-title p {
    font-family: 'primus';
}
h2.list-item-content__title {
    font-family: 'primus' !important;
}

 

Thanks it worked for that! but how do I apply the buttons hover to all of the buttons using that theme? (darkest 2) (darkest 1) 

Ex: sailing page has the same theme (darkest 2) as the homepage first section, but the colour hover doesnt work for those.

Is there a way to figure out sections codes so I can change buttons hovers? 

Thanks!

Link to comment
8 hours ago, rio9 said:

Thanks it worked for that! but how do I apply the buttons hover to all of the buttons using that theme? (darkest 2) (darkest 1) 

Ex: sailing page has the same theme (darkest 2) as the homepage first section, but the colour hover doesnt work for those.

Is there a way to figure out sections codes so I can change buttons hovers? 

Thanks!

Not sure this is possible. 

Try this code

section[data-current-styles*='"sectionTheme": "black-bold"'] .button-block a:hover {
    background-color: red !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

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.