Squarespace Custom Font Not Working on Mobile? Fix it

Custom fonts failing on mobile devices are caused by a common configuration glitch involving how mobile browsers interpret font files. While desktop versions appear correct, these specific browser interpretation issues cause display errors on phones. Correcting this configuration ensures consistent typography across all platforms.

The reason a Squarespace custom font fails on mobile devices usually boils down to your CSS @font-face declaration. Specifically, many mobile operating systems will ignore the font if it isn’t explicitly defined in both .woff2 and .woff formats. If the browser doesn’t see those specific instructions, it won’t know how to render the file on a handheld device. To fix this, you need to update your Custom CSS to include both formats with the correct syntax.

Emergency Stop-Gap: To get your site looking professional immediately while we address the underlying code, add a standard font stack to your CSS: font-family: 'YourCustomFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;. This acts as a safety net. If the mobile device struggles to load your custom font file, it will automatically fall back to a clean, native system font instead of defaulting to a broken layout or an awkward standard serif.

Before You Start

Before you start tinkering with your Custom CSS, grab a full backup of your site. Squarespace doesn’t provide an “undo” button for deleted code blocks; if something breaks, there is no automatic way to revert it. If you are planning on making extensive changes, copy your existing CSS into a plain text file on your computer first. Think of this as your insurance policy. If the layout breaks while you are editing, you can simply paste that original code back in to restore the site instantly.

Related guide: Squarespace Contact Page Submit Button Not Working?

Why does my font look different on mobile?

It is incredibly common for your branding to seem like it’s “breaking” the moment someone opens your site on a phone. If your custom font looks perfect on your desktop but swaps to something generic on mobile, your website isn’t actually broken; rather, it is experiencing a common browser interpretation issue.

Mobile browsers, such as Safari on iOS or Chrome on Android, are designed to be aggressive regarding performance and load speeds. When these browsers encounter a font file format they don’t recognize immediately—or if the specific CSS instruction for that font is slightly malformed—they will skip your custom font entirely to avoid a delay in page loading.

In those instances, the browser automatically jumps to the next available option listed in your font-family stack. If you haven’t explicitly defined any fallback fonts (like a standard Arial or Helvetica), the device defaults to its base system font—usually a generic Serif or Sans-Serif. This creates that jarring visual jump where your unique branding disappears on mobile screens because the browser chose a “safe” default over your custom selection.

Related guide: Squarespace Custom CSS Layout Broken Fix

What causes the @font-face to fail on mobile devices?

It is incredibly frustrating when your site looks perfect on your desktop but falls apart the moment a customer opens it on their phone. I’ve walked through countless site recoveries where this exact issue was the culprit. While it feels like a major headache right now, @font-face failures usually boil down to a few specific technical roadblocks that we can systematically identify and fix.

Is it an unsupported file format?

While .woff2 is the industry standard for modern web design, mobile hardware—especially older smartphones or specific browser builds—can sometimes struggle with it if the implementation isn’t bulletproof. To ensure your font renders across every possible device, you shouldn’t rely on just one format. You need to provide both .woff2 and .woff files in your CSS. When you list both, the mobile browser will scan the list and grab the first one it actually recognizes. Including both acts as a safety net for older systems.

Is there a syntax error in the CSS code?

Mobile browsers are often much stricter than desktop browsers when it comes to “loose” coding. A single missing semicolon (;), a forgotten set of quotation marks around a font name that contains spaces, or a slight typo in the URL path can cause the entire @font-face block to collapse. If the browser hits one of these errors, it doesn’t just skip the mistake; it ignores the entire definition for that session. This results in the device falling back to a default system font like Arial or Times New Roman.

Is the file path incorrect?

If you moved your assets recently—perhaps by switching hosting, moving files into a new folder, or migrating within Squarespace—the link between your CSS and the actual image file might be broken. Mobile browsers can sometimes interpret relative paths differently than desktop environments depending on how the site’s directory structure is mapped. If the path isn’t absolute or correctly mapped to where the font lives on the server, the mobile browser won’t find the file, and it will fail to load your custom typography.

Related guide: Fix Horizontal Scroll Bar on Mobile

How do I fix my custom font for mobile users?

Mobile devices often struggle to render custom fonts because they prioritize speed and data conservation. When a phone is on a spotty 4G or 5G connection, it may skip your custom font file entirely if the instructions aren’t explicit enough. We can solve this by implementing a “bulletproof” @font-face declaration and an inclusive font-family stack. Follow these steps in your Squarespace dashboard under Design > Custom CSS.

How do I write the correct @font-face block?

Your current font declarations likely lack the specific metadata needed to handle mobile handshakes. You need to replace those lines with a structured block that defines both modern and legacy formats. This gives the browser a clear roadmap of what it is looking at before it attempts to load the file.

@font-face {
  font-family: 'MyCustomFont';
  src: url('https://your-site.domain.com/fonts/myfont.woff2') format('woff2'),
       url('https://your-site.domain.com/fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

The font-display: swap; property is a critical “battle scar” tip from the field. It tells the browser to show a standard system font while your custom font is still loading. This prevents the dreaded “Flash of Invisible Text” (FOIT), where your headlines stay blank for several seconds while a mobile device struggles to establish a connection. You can find more technical specifications on this standard at developer.mozilla.org.

How do I apply it to all website elements?

Once the @font-face block is defined, you must explicitly tell Squarespace’s CSS to use that specific name for your headers and body text. You must include a “fallback” list—this acts as a safety net so the browser has an immediate backup plan if your custom file fails to load on a slower mobile connection.

h1, h2, h3, h4, h5, h6, p, span, a {
  font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

By including these system fonts (like Arial or Roboto), you ensure that if the .woff2 file fails to load over a mobile network, the text remains legible and retains a professional look by defaulting to the device’s native system fonts.

Technical Audit of Font Issues

Issue Category	Technical Cause	Impact on Branding
Format Support	Missing .woff for older iOS devices.	Brand inconsistency on mobile.
CSS Syntax	Missing semicolons or quotes in CSS.	Total font failure across all devices.
Rendering Speed	Large file sizes (over 200kb) on mobile.	”Flash of Invisible Text” during load.
Pathing	Broken URLs in the @font-face block.	Font defaults to system serif/sans-serif.

Is there a way to test this without a physical device?

You don’t need a fleet of smartphones to get this sorted. You can use Chrome DevTools to simulate various mobile environments, which helps us determine if the problem lies within your code or simply with how your specific phone is storing data.

1. Open your site in Chrome on a desktop computer.
2. Right-click anywhere on the page and select Inspect.
3. Click the Toggle Device Toolbar icon (it looks like a small phone overlaid on a tablet).
4. Select a specific device from the list, such as an iPhone 12 Pro, and refresh the page.

If your fonts display correctly in this simulator but remain broken on your actual phone, we can narrow the issue down to a caching conflict. In these cases, clear your mobile browser’s cache or open the site in an Incognito/Private window. This forces the device to ignore old, cached files and pull a fresh version of your CSS.

Common mistakes that make the problem worse

I’ve seen so many site owners get caught in a frustrating loop where trying to “patch” a bug actually creates three new problems. It is incredibly draining when your site isn’t behaving, but these issues usually stem from a few specific technical traps that we can clear out right now.

Avoid these common pitfalls that often lead to “broken” fixes:

1. Using Relative Paths: Never use url('/fonts/myfont.woff'). When you use a relative path, you are asking the mobile browser to guess where the file is located based on the current page’s folder structure. This is unreliable. Always use absolute URLs (starting with https://) to ensure the mobile browser knows exactly where to find the file regardless of the current page’s subdirectory. It removes all ambiguity from the request.

2. Skipping Quotes: If your font name contains any spaces (for example, “Brand Bold”), it must be wrapped in single or double quotes in both the @font-face and the font-family declaration. Without those quotes, the browser’s CSS engine often fails to read the full name correctly, causing the font to default back to a standard system font.

3. Over-complex CSS Selectors: It is tempting to try and target every specific button or icon individually to get the styling “perfect,” but this leads to what we call “specificity wars.” This happens when your custom code and the platform’s default code (like Squarespace’s built-in rules) are fighting each other; usually, the platform wins. Using a broader selector like * { font-family: ... } or targeting common tags (h1, p, etc.) is much more stable for mobile performance because it tells the browser exactly what to do without triggering a conflict with the underlying system code.

When should I hire an expert to handle my site’s styling?

There are moments when trying to DIY your way through a technical hurdle starts to cost more in time and frustration than it’s worth. If you find yourself stuck on any of the following hurdles, it is usually a sign that bringing in a specialist to clean up the code is the most efficient path forward:

• Your custom font refuses to appear even after you have correctly implemented the @font-face block. This often indicates a complex issue with file paths, server permissions, or deep-seated caching problems that are difficult to diagnose without specialized tools.
• You are implementing heavy animations or “sticky” navigation elements that “jump” or shift position the moment your custom font loads. This is known as Cumulative Layout Shift (CLS), and it creates a jarring experience for users; an expert can stabilize these elements so the transition is seamless.
• You need to optimize your font files to ensure they load in under 100ms on mobile networks. Speed is critical for retention, and a developer can compress and host these assets properly to ensure your site stays fast regardless of the user’s connection.

Beyond these specific technical roadblocks, an expert provides value by performing a comprehensive audit of your entire CSS file. I often find that older sites—especially those moved from previous Squarespace versions or cluttered with years of abandoned plugins—contain “ghost” rules. These are conflicting lines of code that fight against your new custom styles, causing unpredictable behavior across different browsers. A professional will strip out that junk and ensure your site’s styling is clean and stable.