How do I change the font on my Squarespace Nav Bar to custom font?

Question

I've recently uploaded a custom font to my squarespace page (Bedford Template) and, as I'm applying it through the sit, am having a hard time with the nav bar.

For the items that are Links are the nav bar, I can change the font with:

    #headerNav nav a {
    font-family: 'Vitesse-Sans' !important;
    }

But the items that are folders, not links, won't change. I can't find the code to change the folder text!

Here's our site: https://www.asapasap.org/

Thank you!

Scott

Answer 1

The solution is to use a very similar CSS rule, but to target the .folder-toggle class instead, like this:

#headerNav nav .folder-toggle {
  font-family: 'Vitesse-Sans';
}

If you haven't already, consider familiarizing yourself with browser developer tools/web inspector (often opened with the F12 or CTRL+SHIFT+I keys). With it, you'd be able to explore the existing CSS rules applied to your site and experiment with the best ways to override them.