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

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

First impressions are everything, and in the digital realm, your website’s menu is the gateway to a visitor’s experience. On mobile, where attention spans are shorter, the menu becomes even more crucial. Squarespace 7.1 allows some adjustments, but for true font finesse, we need to delve into the realm of custom CSS. Let’s begin with How to use a custom Font for mobile menu in Squarespace 7.1. Think of it as your typographic lightsaber – a powerful tool to elevate your basic mobile menu font into something truly brilliant!

 It’s essential to note that Squarespace 7.1 is the key to unlocking these font customization powers. Unfortunately, older versions lack this capability, so upgrading is a prerequisite.

The Power of Custom CSS

Custom CSS is our secret weapon for a visually appealing mobile menu font. Just like a lightsaber, it gives us the precision and control needed to stand out in the digital universe. The analogy is not just symbolic; it’s a practical approach to transforming the ordinary into the extraordinary.

Using Custom Font for Mobile Menu in Squarespace 7.1

Choosing Your Font Wisely

When it comes to selecting a custom font for your mobile menu, there are several factors to consider. First, explore font resources and licensing options. Websites like Google Fonts and Adobe Fonts offer an extensive library of free and licensed fonts that you can use for your website.How to use a custom font for mobile menu in Squarespace 7.1How to use a custom font for mobile menu in Squarespace 7.1

When choosing a font, consider its compatibility with your brand. Does it convey the right tone? Does it reflect your brand’s personality? These considerations will ensure that your mobile menu font aligns seamlessly with the rest of your website.

Uploading Your Font Treasure

  • Once you’ve chosen the font, log in to your Squarespace account.
  • Navigate to “Website Tools” > “Custom CSS” and then click on “dropdown icon>+ icon.” How to use a custom font for mobile menu in Squarespace 7.1

Here, you’ll drag and drop your font file (preferably .ttf or .otf). Squarespace will work its magic, preparing your chosen font for action.

Crafting Your CSS Spell

Copy and paste the following code into the Custom CSS panel, but remember to replace “YourFontName” with your chosen font’s name and update the path if necessary:

@font-face {
  font-family: "YourFontName";
  src: url(path/to/your/font.ttf);

.header--menu-open a {
  font-family: "YourFontName", sans-serif;

This code applies the font magic to all mobile menu links, including your site title. If you want to be more specific, variations are provided for targeting page links or focusing on the button.

Want to be more specific? Use these variations:

  • Target-only page links: Replace .header--menu-open a with .header--menu-open .header-menu-nav-folder-content a.
  • Focus on the button: Swap .header--menu-open a with .header--menu-open .btn.

Saving and Witnessing the Fontastic Transformation

Click “Save” in the Custom CSS panel and preview your mobile menu. Marvel at the glory of your typographic feat! You’ve just bestowed your website with a unique voice that resonates even on the smallest screens.

Bonus Tips

As you revel in your newfound typographic prowess, don’t forget these bonus tips:

  • Clear your browser cache for good measure.
  • Test your font choices on various mobile devices to ensure optimal readability.
  • Use custom fonts sparingly to avoid performance issues. Remember, with great power comes great responsibility; in this context, it also affects website loading speed!


In the realm of websites, every element speaks volumes, and your mobile menu is no exception. By following these steps and unlocking your inner typographer, you’ve transformed your mobile menu from basic to brilliant. Remember, your website’s voice matters, and the mobile menu is the perfect canvas to let it shine through!

You may also like:

How to Assign an Image Animation in Squarespace

How to customize the footer of a lesson in the Squarespace course


What is the standard font size for mobile?

In terms of app font size, a good rule of thumb is a minimum type size of 16 pixels for body copy with headings being around 1.3 times larger than that.

What is the best font for the website?

The best font for websites depends on the purpose of the website and the target audience. However, some popular and well-regarded fonts for websites include Helvetica, Arial, Georgia, Tahoma, and Roboto. Helvetica is a sans-serif font known for its clean and simple design.

Which font is best for an SEO website?

Fonts can play a role in your website’s SEO too. Some fonts are easier to read than others, while some might be too fancy or trendy for search engines. Stick to standard fonts like Arial, Times New Roman, or Verdana, as they are easier for search engines to recognize.

What is the line height for mobile?

Google recommends using at least the browser default line-height of 1.2. This means that the space between the lines of text is at least 1.2 times the size of the text.