7.0 Change Navgation fonts not working

Site URL: https://www.bauyu.com/homepage

I have successfully changed the title, body text to the font I want, but the navigation and drop-down menus are still unable to change the font.

I have tried the discussion methods linked below, but I still can't change it.

These are the answers I refer to :

https://forum.squarespace.com/topic/159028-71-nav-custom-font-css/page/2/

https://forum.squarespace.com/topic/172666-having-trouble-changing-fonts-with-css/

Below is the custom CSS code I am currently using:

Quote

 

@font-face {   
font-family: 'noto-serif-tc';   
src: url(https://static1.squarespace.com/static/586bbf709de4bb2b782126a6/t/62209e9853bc0b3ee4f27201/1646304941451/NotoSerifTC-Regular.otf), url(https://static1.squarespace.com/static/586bbf709de4bb2b782126a6/t/62209ebc4372a21074486f82/1646304964101/noto-serif-tc-v20-chinese-traditional-regular.woff), url(https://static1.squarespace.com/static/586bbf709de4bb2b782126a6/t/62209ee1a066944f3622165d/1646305000095/noto-serif-tc-v20-chinese-traditional-regular.woff2);}

h1 {
font-family: 'noto-serif-tc';}
h2 {
font-family: 'noto-serif-tc';}
h3 {
font-family: 'noto-serif-tc';}
body {
font-family: 'noto-serif-tc';}

.sqs-block-button-element {
  font-family: 'noto-serif-tc' !important;
}
.quote-block  {
  font-family: 'noto-serif-tc' !important;
}
.image-title-wrapper * {
  font-family: noto-serif-tc !important;
}
.image-subtitle-wrapper * {
  font-family: noto-serif-tc !important;
}

 

Thank you for your help!

52 minutes ago, Bauyu said:

Site URL: https://www.bauyu.com/homepage

I have successfully changed the title, body text to the font I want, but the navigation and drop-down menus are still unable to change the font.

I have tried the discussion methods linked below, but I still can't change it.

These are the answers I refer to :

https://forum.squarespace.com/topic/159028-71-nav-custom-font-css/page/2/

https://forum.squarespace.com/topic/172666-having-trouble-changing-fonts-with-css/

 

 

Below is the custom CSS code I am currently using:

 

Thank you for your help!

Hi, just add this code to custom css. Let me know how it goes 🙂 

.Header-nav-item {
  font-family: 'noto-serif-tc';
}

14 hours ago, Jia said:

Hi, just add this code to custom css. Let me know how it goes 🙂 

.Header-nav-item {
  font-family: 'noto-serif-tc';
}

It works!!!! Thank you!!😭

On 3/7/2022 at 6:36 PM, Jia said:

Hi, just add this code to custom css. Let me know how it goes 🙂 

.Header-nav-item {
  font-family: 'noto-serif-tc';
}

Hello, 

I have found another problem is that the font of the mobile version cannot be changed, do I need to add any more css code?

57 minutes ago, Bauyu said:

 

 

Hello, 

 

I have found another problem is that the font of the mobile version cannot be changed, do I need to add any more css code?

Hi, yes you need to add more code, specifically targeting the mobile menu links. Here it is:

.Mobile-overlay-nav .Mobile-overlay-nav-item {
  font-family: 'noto-serif-tc' !important;
}

14 hours ago, Jia said:

Hi, yes you need to add more code, specifically targeting the mobile menu links. Here it is:

.Mobile-overlay-nav .Mobile-overlay-nav-item {
  font-family: 'noto-serif-tc' !important;
}

Thank you sooo much!!!! 😍

On 3/9/2022 at 6:34 PM, Jia said:

Hi, yes you need to add more code, specifically targeting the mobile menu links. Here it is:

.Mobile-overlay-nav .Mobile-overlay-nav-item {
  font-family: 'noto-serif-tc' !important;
}

Hello, how can I change the sub navigation (image002)  with mobile menu? 

It's from this navigation! (image001)   Thanks again !

2 hours ago, Bauyu said:

 

Hello, how can I change the sub navigation (image002)  with mobile menu? 

It's from this navigation! (image001)   Thanks again !

 

 

Here's the code:

.Mobile-overlay-folder-item {
  font-family: 'noto-serif-tc';
}

And this one is for the arrow and text that says 'BACK'

.Mobile-overlay-folder-item--toggle {
  font-family: 'noto-serif-tc' !important;
}