Google fonts slowing load time?

As an experiment, I tried switching to the System Font Stack for body in the customizer. It makes a huge difference, in PageSpeed Insights getting scores all in the 90s on mobile and high 90s-100 on desktop. I can’t believe downloading a few font files makes such a huge difference. It must require more processing in the client than equivalent file size of an image.

It doesn’t look quite as nice this way, and I don’t know what it looks like on other platforms, so I would still like to find a fast way to use Google’s Open Sans – self-hosting didn’t even help really.

Thanks Tom! Last year someone asked about using system stack for mobile and a google font for desktop. You said sure, and asked a question he never replied to, so you never got to the answer.

I’d like to try that in a way that won’t mess up GeneratePress. Mobile seems to be more impacted by using Google fonts.

So would I set the customizer to the system stack, and then do something like this in styles.css?

@media only screen and (min-width: 980px) {
   @font-face {
      font-family: "Open Sans";
      src: url(https://fonts.googleapis.com/css?family=Open+Sans:300,regular,italic,700&display=swap);
      font-weight: normal;
      font-style: normal;
   }

   body {
      font-family: "Open Sans";
   }
}

I have a pretty strong feeling this isn’t right, but wanted to at least try something.

OK, sorry to drag this out. I will try something like that, but isn’t it backwards? If on mobile, I want to use the system font stack rather than google fonts.

Thanks @ejcabquina, but that didn’t quite work. It does cause the browser to switch between using system fonts when narrow to Open Sans when wide, but Open Sans google fonts gets downloaded for mobile as well as desktop (PageSpeed Insights shows it as render blocking for both).

Of course I had to set Customize > Typography > body to Google’s Open Sans, otherwise it wouldn’t be there for desktop. The rest were set to inherit.

If as Tom says, the font request can’t be conditioned on a media query, maybe there’s no way to download the fonts for one and not the other.

That works! And leaving the customizer body section set to system stack. Now I only download google font on desktop. Thank you!

One minor thing. When I go to that URL:
https://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C400i%2C700&subset=latin%2Clatin-ext

I see just the desired family, weights, and styles, but I see all the cyrillic and vietnamese etc. in addition to the latin. I don’t understand the use of the codes for certain characters there (assume it’s because it’s in php), but does the ampersand before the word “subset” also need to be converted, like to %amp or something?

Again, minor, as I don’t think it really affects speed.

EDIT: Hmm, even following Google’s example for getting a subset, I get all of them:

To request the Greek subset of the Roboto Mono font, the URL would be:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

EDIT 2: Apparently it’s more complicated than that, and all is working as it should. Thanks for the awesome help!

• This reply was modified 5 years, 9 months ago by Jim.
• This reply was modified 5 years, 9 months ago by Jim.

I’m baaaack! I discovered a funny problem with this strategy of using system fonts on mobile and google fonts on desktop.

I was puzzled that when repeatedly using PageSpeed Insights, the mobile output, on various pages sometimes google fonts were downloaded and sometimes they weren’t.

I think I found the problem in comments to this nice post:
https://jamesc.id.au/2013/05/mobile-detection-wordpress-wp_is_mobile/
Caching on the server – mobile user may be served a cached page intended for desktop (and I assume vice versa).

Any magical ideas for getting around that? 😉