Adding a customize font for buttons and hover for buttons

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!

Hi. Your site is private. Can you setup password & share url again? We can help easier

7 hours ago, tuanphan said:

Hi. Your site is private. Can you setup password & share url again? We can help easier

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

PS: OH2022

You can see the buttons where I am trying to change the hover colour to #31ddd9

And you can see the font for List items "title" and "Subtitles/names" where I am trying to have primus as font for all of the titles on my site

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

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!

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