Use multiple fonts on Tremont index navigation

Site URL: https://thomson-street.squarespace.com/

Hi, 

How do I change/assign more than one font + font-size to the header style on the index gallery nav in Tremont? (refer attached image #1)

I would like to create the effect of the attached image #2 of white text on black background using 3 different styles / 1 for each header.

I am using the Tremont template and have the index gallery navigation as the homepage.

What is access password?

@tuanphan ts2020

Add to Home > Design > custom CSS

a.reveal span {
    font-size: 20px;
    color: red;
}
a.celebrate-1 span {
    font-size: 30px;
    color: green;
}
a.showcase span {
    font-size: 100px;
    color: violet;
}

Thank you @tuanphan but it still doesn't work!

I used the code below

a.celebrate span {
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 80px;
}
a.showcase span {
font-family: aviano-didone, serif;
font-weight: 300;
font-style: normal;
font-size: 80px;
}
 

Is there another way?

my code didn't work or your code didn't work?

@tuanphan both your code and my code didn't work

On 10/13/2020 at 3:31 AM, nrdesignco said:

Thank you @tuanphan but it still doesn't work!

I used the code below

a.celebrate span {
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 80px;
}
a.showcase span {
font-family: aviano-didone, serif;
font-weight: 300;
font-style: normal;
font-size: 80px;
}
 

Is there another way?

Your Custom CSS box has syntax error so all (or some) CSS won't work. If you look carefully, you will see a red notice at the bottom of Custom CSS box.

Hello @tuanphan! we got the code working thank you! are you able to help with styling for mobile view? the text currently doesn't fit in the screen:

18 hours ago, nrdesignco said:

Hello @tuanphan! we got the code working thank you! are you able to help with styling for mobile view? the text currently doesn't fit in the screen:

Add to Home > Design > custom CSS

/* text size mobile */
@media screen and (max-width:640px) {
.collection-nav-item * {
    font-size: 30px !important;
}
}