Custom font on mobile nav button not working

Hi everyone! I am having trouble figuring out how to get my custom font to show on the mobile nav button, see screenshots. The Calibri font is showing on the desktop header but the same button on mobile is the template font that I just cannot get to change.

This is what I have in my CSS:

// MOBILE NAV //

.header-nav *, nav.header-menu-nav-list * {font-family: 'calibri-regular';}

//HEADER BUTTON//

.header-actions-action--cta .sqs-button-element--primary {font-family: 'calibri-bold'!important;}

//BUTTONS//
 
.sqs-block-button-container a{
font-family: 'calibri-bold' !important;}

.sqs-block-button-element--medium, .sqs-button-element--primary {font-family: 'calibri-bold';}

.sqs-block-button-element--large,.sqs-button-element--secondary {font-family: 'calibri-bold';}

.sqs-block-button-container a{font-family: 'calibri-bold'!important;}

#siteWrapper .sqs-button-element--primary {font-family: 'calibri-regular';}

What am I missing?

password is legacy24

Thank you!

Hi,

What is site url?

Site url is https://www.legacyaccountants.co.nz/

I also can't figure out how to get the date and tags on the blog to change to my custom font. This is the CSS code I've added....

//BLOG//

.entry-title {font-family:'calibri-bold'!important};
.blog-title {font-family: 'calibri-bold'!important};
.summary-title {font-family: 'calibri-bold'!important};
.blog-date {font-family: 'calibri-regular'!important};
.blog-item-wrapper {font-family: 'calibri-regular'!important};
.item-pagination-link {font-family: 'calibri-regular'!important};
.item-pagination-title {font-family: 'calibri-regular'!important};
.blog-meta-item {font-family: 'calibri-regular'!important};
.blog-more-link { font-family: 'calibri-regular'!important};
.blog-meta-item span, .blog-meta-item a, {font-family: calibri-regular !important;}

Thank you so much!

On 4/12/2024 at 11:48 AM, treaves said:

Site url is https://www.legacyaccountants.co.nz/

I also can't figure out how to get the date and tags on the blog to change to my custom font. This is the CSS code I've added....

//BLOG//

.entry-title {font-family:'calibri-bold'!important};
.blog-title {font-family: 'calibri-bold'!important};
.summary-title {font-family: 'calibri-bold'!important};
.blog-date {font-family: 'calibri-regular'!important};
.blog-item-wrapper {font-family: 'calibri-regular'!important};
.item-pagination-link {font-family: 'calibri-regular'!important};
.item-pagination-title {font-family: 'calibri-regular'!important};
.blog-meta-item {font-family: 'calibri-regular'!important};
.blog-more-link { font-family: 'calibri-regular'!important};
.blog-meta-item span, .blog-meta-item a, {font-family: calibri-regular !important;}

Thank you so much!

 

You can use CSS code like this

.blog-item-meta-wrapper * {
    font-family: 'calibri-bold' !important;
}

@tuanphan Thanks for all your help as always! How do I target custom fonts for my buttons and specifically the button in my header? Thanks!

On 5/7/2024 at 6:19 AM, Andrew101 said:

@tuanphan Thanks for all your help as always! How do I target custom fonts for my buttons and specifically the button in my header? Thanks!

 

Header button use this ID

header#header a.btn

12 hours ago, tuanphan said:

Header button use this ID

header#header a.btn

Nice! (worked)