Why your Google Font isn't showing up on your Squarespace site on mobile

• 00
• 01
• 02
• 03
• 04

There’s one question I’ve been getting a lot lately regarding a super frustrating issue that the title of this post already spoiled for you: “why isn’t my custom font showing on mobile?“.

What’s interesting is that the problem isn’t happening with custom fonts uploaded via CSS, but with Google Fonts (applied via CSS) that are supposedly already part of Squarespace’s fonts list.

I addressed this situation in a previous post, but I realized there was a lot of information missing there.

So, today, I’ll be giving you an updated and more in-depth explanation of what’s going on and how to fix it in a few minutes!

Let’s get to it!

Note: this problem usually comes up when trying to modify the font of elements that AREN’T available via the Site Styles panel such as summary block excerpt text. But, to keep things simple and focus on the issue instead of on how to target stuff, I’ll be tackling changing the font of an h1 even when that’s doable through the editor.

The two main reasons behind the issue

There are two main reasons as of why your Google Font may not be loading on your mobile devices when you’re adding them via CSS:

1. The font family name in use is incorrect.

2. The font hasn’t been loaded to the site.

Both issues are pretty easy to fix, but not always easy to spot.

So, let’s look at an example and see how to go about making things right.

Making sure the correct font name is in use

I’m starting out with a simple hero section including an h1 and some text.

My goal is to change up the h1’s font and set it to this Google Font called “Special Elite”:

So, I’ll hop onto my Custom CSS window, target my h1 and give it that font-family:

h1 {
  font-family: 'special elite';
}

Well… the font changed but that’s not my font.

So, let’s start by checking if we have the font name right.

To do so, we’ll go back into our Google Fonts page and click on the “Select this Style” link:

View fullsize

Then, in the little sidebar that slides open we’ll click on the “Embed” tab and look at the exact syntax that should be used in our code to display that font:

View fullsize

Ok, so it’s supposed to read “Special Elite” and we currently have it as “special elite”, so let’s change that:

h1 {
  font-family: 'Special Elite';
}

Uhm… still nothing.

Ok, no biggie.

We’ll keep that as it is and move onto checking the second part of the problem.

Making sure the font is loaded

Google Fonts can be loaded on Squarespace in two different ways:

1. Through the Site Styles.

2. Through code.

At the moment, I’m not using that particular font ANYWHERE ELSE on the site through the editor.

That means that I don’t have the font loaded on my site, and therefore I can’t use it simply because it’s not available.

To load the font through Squarespace, all we have to do is give that particular font to another element on the site.

In my case, I’ll set it as my branding font (for both desktop and mobile for consistency purposes):

And just like that, boom! My h1 changed as well.

Because I set the font through Squarespace, even if it was for a completely different text element, the necessary file that carries the font was added to the site itself, so now we can “call” that font via CSS to add it to anything else we want.

And the cool thing is that loading the file also makes it possible for the font to be visible on any device:

Now, I can hear what you’re thinking: “what if I DON’T want to add the font to anything else on the site?”

Well, in that case we just have to load the font through code!

I’m changing back the branding font to something else so that we can see the full effect, but keeping the font-family inside the Custom CSS window with the name syntax we got from the Google Fonts page:

Now, inside the same Google Fonts page and under the same “Embed” tab, we’ll need to grab the link shown there to manually load the font on our site:

View fullsize

Let’s plop that into our Code Injection Header section:

Awesome!

Now the h1 is set to the new font, and the good news is that we can continue to use other fonts across the site since the font file is being loaded through the code we added, we don’t need Squarespace’s editor to do it for us.

But hold up! There's one more thing to keep in mind

There are some fonts that are part of both Google Fonts and Adobe Fonts, and that can sometimes make things a bit more confusing so, let’s take a quick look at this situation.

A perfect example of this type of font is “Bebas Neue”.

Notice how in Google Fonts, the CSS syntax for its name is “Bebas Neue”:

View fullsize

Whilst on the Adobe Fonts page it’s “bebas-neue”:

View fullsize

The problem here is that if we load the font via Squarespace’s editor, we don’t know which font file it’s using.

That means that if we’re unaware that the font has TWO different sources, we can try to force the Google Fonts “Bebas Neue” syntax all we want, but it won’t do anything if the font is being loaded through an Adobe Fonts file.

So, there are two ways we can go about it:

1. Either embed the Google Fonts code and stick to the Google Fonts syntax, even if the same font is being loaded elsewhere via Squarespace’s editor.

2. Or, use the Inspect Element tool to check the font styles of an element that already has that font enabled through the editor and use the same syntax in our code:

So, there you have it!

That’s how you can check why the heck your Google Font isn’t loading on your Squarespace site on mobile devices, and what you can do about it!

Until next time,

B.