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:
Navigate to Design > Custom CSS
Click on the Manage Custom Files button at the bottom
Drag and drop your font file to upload it to your custom files
Update the code below to name the font
@font-face {font-family:FontName; src: url(url-here)}Remove the text url-here
Click on the Manage Custom Files button
Click on the font file you uploaded; this should place the URL in your code
Use that font name instead of serif in the codes above