How can I change my Mobile Menu Login Font to be the same as my Uploaded Font?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Hello I have uploaded my font to use on my site via Design / Custom CSS / Manage Custom Files I'm using this code to use this font as my extra large H1 style:

.header--menu-open .header-menu-nav-item {text-align:left;}

.header--menu-open .header-menu-nav-item {margin-bottom:15px}

.header--menu-open .header-menu-nav-folder-content {justify-content:normal}

.header--menu-open .header-menu-nav-item {font-family:SCHOLAR-SAYZE-SANS}

.header-menu-nav-item a {font-size: 27px;}

.header-menu-nav-folder[data-folder="root"] {

    padding-top: 5vh;

}

I notice that on my mobile menu, the 'Login' link is using a different font. How can I get this to use the same 'font-family:SCHOLAR-SAYZE-SANS'? Image as attached.

Page - https://bluebird-porcupine-yzdg.squarespace.com/home

Pword - bluebird

Many thanks,

Best,

Faiz

Add to Design > Custom CSS

/* Login link custom font */
div.user-accounts-link * {
    font-family: 'SCHOLAR-SAYZE-SANS';
}

AWESOME! Thanks very much Tuanphan - looks real cool.

I'm starting to learn some code so I can understand what is being applied to the styling. I understand about the command of the font family styling and how to change size, color, letter spacing etc. But how do you identify the actual 'target' of what you want to change, for example in this case 'div.user-accounts-link' *? How do you know what this location is called?

I would be grateful if you could help me understand this. 

Many thanks!

On 3/8/2021 at 3:45 PM, scholarsayze said:

AWESOME! Thanks very much Tuanphan - looks real cool.

I'm starting to learn some code so I can understand what is being applied to the styling. I understand about the command of the font family styling and how to change size, color, letter spacing etc. But how do you identify the actual 'target' of what you want to change, for example in this case 'div.user-accounts-link' *? How do you know what this location is called?

I would be grateful if you could help me understand this. 

Many thanks!

Hi, It calls "class or id name"

Hover on elements that you want to check >> Right Click >> Click on Inspect Element >> The code box will appear >> Look at top left corner >> You will see arrow inside square icon >> Click on it >> Hover on elements that you want to check >>> It will show class/id name.

Thank you Tuanphan for the detail explanation. So for my example attached, this class or id name would be 'div.sqs-block-content', is that correct?

Thank you!

On 3/18/2021 at 3:51 PM, scholarsayze said:

Thank you Tuanphan for the detail explanation. So for my example attached, this class or id name would be 'div.sqs-block-content', is that correct?

Thank you!

Yes. However you should use text block id. Use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thanks so much Tuanphan I really appreciate that 💯