Different custom fonts on both site title and site header

Site URL: https://chrysalis-puma-rt8h.squarespace.com/

Hi! I'm trying to change my site title to one custom font, and the rest of the header/footer to another one. 

I used this code sucsessfully to change the site title:

#site-title {font-family: 'EksellDisplay'; src:local('Example'), url(https://static1.squarespace.com/static/61d56b82725cde14d95764f9/t/61d56d158491b024edd96292/1641377045670/EksellDisplayLarge.woff2)}

But when I used this code to change the header and footer, it overrides the code I inserted above:

header#header *, footer.sections * {
    font-family: Apercu;
}

Can someone help me finding a way to override this with my custom font for the site title? 

Nevermind! I solved it by inserting !important 🙂

#site-title {font-family: 'EksellDisplay'!important; src:local, url(https://static1.squarespace.com/static/61d56b82725cde14d95764f9/t/61d56d158491b024edd96292/1641377045670/EksellDisplayLarge.woff2)}