Changing font for menu and navigation in Athena

I am trying to change the font for the main menu in the Athena template. I have tried the following:

Site settings > Typography > Navigation. (See attached screenshot.) Change the font here. It does not affect the font on the site's main menu.

li a.nav-link {
font-family: Source Sans Pro;
}

That also doesn't help.

$heading-font-family: "Source Sans Pro";

That also doesn't work!

Any help would be appreciated!

Thank you!

I have solved the problem by using a more specific CSS selector.

But I would like to know why changing the Navigation font in the site settings doesn't seem to work.

Thank you!

brucebutton In this template, we add style for navigation via template style due to the concept of template.

For the setting for navigation, I will check with team again. Thanks for your report.