Why your custom font isn't showing on mobile

I've been asked a couple of times how to fix the issue of custom fonts not showing up on mobile in Squarespace, so I wanted to address that today.

When you're using custom fonts in Squarespace, you're probably doing it one of two ways:

  1. By adding external custom fonts through CSS.

  2. Or by using a Google Font that is available on Squarespace's font list, BUT you're not using it anywhere in your style editor.

 

The problem and fix is different in each case so let's take a look.

 

When using custom fonts that aren't google fonts

If you uploaded the individual font files to Squarespace and then set them up through code (using @font-face) and your font is not showing up on your mobile device, you may want to check you uploaded all the different file types recommended to allow for maximum browser compatibility.

In this tutorial I explain how to easily obtain the additional file formats if you only have one or two!

 

Pro tip: make sure to always add a fallback font whenever you're using a custom font, to be able to control what gets display instead of your first choice if something goes wrong. It's as easy as adding one or two more font options to your code that you're already using on your site:
font-family: 'your chosen font', 'a just in case font', 'another just in case font';

 

When using google fonts

If you decided to use code to set a font (e.g for your h4) that can be found in Squarespace's font list BUT you're not using on your site through the Style Editor, then that font – to put it simply – is not "activated".

What I mean by this is that the code involved in making that font display on any device has not been added to your site's header by Squarespace, as normally happens when you select a font from the list to set it within the Style Editor.

This is why you can only see it on your computer or any other device that has that particular font installed in the system, because otherwise your browser has no idea where to load it from.

 

To fix it, all you have to do is embed the font in your site's header manually. It's super easy, I promise!

1. Go to https://fonts.google.com/

2. Look for the font you're using and click on it. Let's say we're going with "Permanent Marker".

Choosing a custom font from Google Font

 

3. Now click on the top right corner where it says "Select this font". You'll notice a smaller window appears on the bottom-right corner.

Selecting a font in Google Fonts

 

4. Click on that window to bring it up and copy the code right under "Embed".

Embedding Google Fonts in Squarespace

 

5. Go into your Squarespace site's header (Settings > Advanced > Code Injection) and paste that into the Header section.

 

That's it! Now your browser will know where to load the font from, on any device.

 

Until next time,

B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way