Squarespace Custom Font Not Working on Mobile

Font Not Loading on Mobile at All

Font File Format Not Supported

Mobile browsers require WOFF2 format for optimal font loading. If your self-hosted font is only in TTF, OTF, or EOT format, it may not load on some mobile browsers. Convert your font files to WOFF2 using a tool like Font Squirrel's Webfont Generator. Include WOFF as a fallback. Update your @font-face rule to reference the WOFF2 file first:

@font-face { font-family: 'YourFont'; src: url('font.woff2') format('woff2'), url('font.woff') format('woff'); font-display: swap; }

Font URL Using HTTP Instead of HTTPS

Mobile browsers strictly block mixed content (HTTP resources on HTTPS pages). If your font import URL uses http:// instead of https://, mobile browsers will block it silently. Check your Code Injection font link and @font-face URLs - ensure all use HTTPS.

Code Injection Not Loading on Mobile

If the font loads on desktop but not mobile, verify your Code Injection is saved and the font link tag is complete (including the closing angle bracket). Mobile browsers are less forgiving of malformed HTML than desktop browsers - a missing character that desktop Chrome ignores may prevent the font from loading in mobile Safari. For Code Injection, our guide to custom code injection on Squarespace covers proper syntax.

Font Renders Differently on Mobile

Font Smoothing Differences

iOS Safari and Android Chrome render fonts differently from desktop browsers. Text may appear thinner, thicker, or with different letter spacing on mobile. This is normal cross-platform variation, not a bug. To control font rendering, add: body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Font Size Too Small on Mobile

If your custom font's size is set for desktop and you do not have mobile-specific CSS, text may be too small or too large on mobile. Add a media query for mobile font sizes:

@media screen and (max-width: 768px) { h1 { font-size: 28px; } p { font-size: 16px; line-height: 1.6; } }

Body text should be at least 16 pixels on mobile. Below that, iOS Safari automatically zooms into input fields that use the small font. For mobile typography, our guide to Squarespace mobile optimization covers font sizing and readability.

Flash of Unstyled Text (FOUT) on Mobile

What It Looks Like

When a page loads, text briefly appears in a system fallback font (Arial, Times New Roman) before switching to your custom font. This flash is more noticeable on mobile because slower network connections increase the time between page load and font download completion.

The Fix: font-display: swap

Add font-display: swap; to every @font-face rule. For Google Fonts, append &display=swap to the font URL in your Code Injection link tag. This tells the browser to display text immediately using a fallback font, then swap to the custom font when it finishes loading. The flash still happens but is less jarring than invisible text (FOIT).

Preload Critical Fonts

Add a preload link for your most important font file in Code Injection Header: <link rel="preload" href="YOUR_FONT_URL.woff2" as="font" type="font/woff2" crossorigin>. This tells the browser to start downloading the font immediately rather than waiting until the CSS parser encounters it. Preload only one or two font files - your primary heading and body font. For font performance, our Squarespace page speed guide covers font loading optimization.

Mobile Browser Caching Issues

Font Cached from Previous Version

If you changed your custom font but mobile devices still show the old one, the old font file is cached. Mobile browsers cache font files aggressively. The fix: clear the mobile browser cache (Settings > Safari > Clear History and Website Data on iOS, or Chrome > Settings > Privacy > Clear Browsing Data on Android). Ask affected visitors to do the same.

Font Works in Mobile Incognito but Not Regular Browser

If the correct font appears in a private browsing tab but not the regular browser, caching is confirmed as the cause. The cache will update eventually - typically within a few days as cached files expire.

CSS Issues Specific to Mobile Fonts

Font-Family Not Applied at Mobile Breakpoints

If your Custom CSS sets the font-family inside a desktop-only media query (like @media screen and (min-width: 769px)), the font rule does not apply on mobile. Write font-family rules outside of media queries so they apply at all screen sizes. Use media queries only for size-related adjustments (font-size, line-height). For CSS techniques, our guide to adding custom CSS to Squarespace covers responsive font rules.

Site Styles Overriding Custom Font on Mobile

Squarespace's Site Styles may apply different font settings at mobile breakpoints depending on your template. If your custom font works on desktop but reverts to the template font on mobile, the template's responsive CSS may be overriding your Custom CSS. Add !important to your mobile font-family declaration as a last resort: @media screen and (max-width: 768px) { body { font-family: 'YourFont', sans-serif !important; } }

Testing Custom Fonts on Mobile

Test on actual devices. The Squarespace mobile preview does not accurately represent font rendering on real phones. Test on an iPhone (Safari) and an Android device (Chrome) for comprehensive coverage.

Test on different networks. Font loading is affected by network speed. Test on Wi-Fi and on mobile data to see how loading time affects the font display experience.

Use browser DevTools device mode. Chrome DevTools (F12 > device toggle) simulates mobile viewports and can throttle network speed to replicate slow mobile connections. This helps identify FOUT issues before they affect real visitors.

Font Performance on Mobile

Limit font weights. Each font weight is a separate file download. On mobile networks, every file adds to load time. Use only the weights you actually need - typically regular (400) and bold (700). Remove light, medium, semibold, and extra-bold if you do not use them.

Use WOFF2 format. WOFF2 compresses 20 to 30 percent better than WOFF, which means faster downloads on mobile networks. All modern mobile browsers support WOFF2.

Consider system fonts for body text. System fonts (San Francisco on iOS, Roboto on Android) load instantly because they are already installed on the device. Using a system font for body text and a custom font only for headings reduces load time significantly. For font strategy, our guide to adding custom fonts to Squarespace covers performance optimization. For design consistency, our Squarespace design tips guide covers typography principles.

Troubleshooting Process

1. Test on actual phone. Does the font load on a real device? Not just the desktop preview.

2. Check font format. Is the font in WOFF2? Mobile browsers need WOFF2 for reliable loading.

3. Check HTTPS. Are all font URLs using https://?

4. Check font-display. Is font-display: swap set in @font-face or the Google Fonts URL?

5. Check CSS scope. Is the font-family rule inside a desktop-only media query?

6. Clear mobile cache. Is the old font cached? Test in private browsing mode.

7. Check network. Does the font load on Wi-Fi but not mobile data? It may be a file size or timeout issue.

Make Your Fonts Work on Every Screen

Custom fonts on mobile require WOFF2 format, HTTPS URLs, font-display: swap, and CSS that applies across all breakpoints - not just desktop. The differences between desktop and mobile font rendering are normal, but the failures (font not loading, wrong font showing, visible text flash) are all fixable.

Test on actual phones. Check the format. Verify the CSS scope. Clear cache when troubleshooting. Your custom font should look intentional on every device your visitors use.