How to use a custom font for the mobile menu in Squarespace 7.1

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

You can use the site styles menu in Squarespace to customize the colors and alignment of your mobile menu, but to change the font family, all you need is a little custom CSS.

In this tutorial, you’ll learn how to assign a custom font for links in your mobile menu.

You’ll learn how to assign a new font family to every link in the menu, including your site title and header button, and you’ll learn how to isolate just the links or just the button if that is all you want to change!

Here are the codes for this tutorial:

This code will change the font family of every link in your mobile menu, including your site title:

.header--menu-open a {font-family: serif}

This code will change only the page links in your mobile menu:

.header--menu-open .header-menu-nav-folder-content a {font-family: serif}

This code will change only the button on your mobile menu:

.header--menu-open .btn {font-family: serif}

If you are using a font on your site, you can change the text serif in the code above to the name of that font family.

---

If you want to install a custom font, follow these steps below:

1. Navigate to Design > Custom CSS

2. Click on the Manage Custom Files button at the bottom

3. Drag and drop your font file to upload it to your custom files

4. Update the code below to name the font
   @font-face {font-family:FontName; src: url(url-here)}

5. Remove the text url-here

6. Click on the Manage Custom Files button

7. Click on the font file you uploaded; this should place the URL in your code

8. Use that font name instead of serif in the codes above