Google Fonts not working after years of working

Site URL: https://personalinfocloud.com

I've used the same Google fonts on my site for years (going back to about 2011 or 2012) and in the last few months they have stopped working, but I haven't touched them. I verified they are still offered and load in the preview, but no the actual site they don't work. The CSS is still valid. 

I'm stumped and peeved.

Please be more specific. What text, where, is not showing in what font?

The whole site is default fonts not the two specified Google fonts, Voltaire for headers and Maven Pro for everything else. The CSS / Design hasn't been touched in years. Other sites I have hand built still work with Google fonts and not sure why SquareSpace's use of Google Fonts isn't working (any browser - Firefox, Chrome, nor Safari nor on Mac, nor iOS).

When I view your site the fonts show as being Voltaire and Maven Pro. I viewed this on an older macOS with both Chrome and Safari.

By chance have you updated your macOS recently? I've seen several posts in the forum of macOS users reporting their sites not showing in the fonts they set for their sites.

I don't recall any of those threads reporting a resolution to the issue.

14 hours ago, creedon said:

Please be more specific. What text, where, is not showing in what font?

11 hours ago, creedon said:

When I view your site the fonts show as being Voltaire and Maven Pro. I viewed this on an older macOS with both Chrome and Safari.

By chance have you updated your macOS recently? I've seen several posts in the forum of macOS users reporting their sites not showing in the fonts they set for their sites.

I don't recall any of those threads reporting a resolution to the issue.

Hmm, I keep all my devices current with OSes and sercurity patches. That may be it, but also I'm not running into this with non-SquareSpace sites I run with Google Font use. 

Also, oddly the CSS and JS inclusion method seems to be correct from SquareSpace, which is what really has me stumped. 

Apple OSes have set limits on redirects and they have been getting tighter with the number of hops the last few years. It could be internal hops in SquareSpace combined with Google Fonts which has a couple in it by its self may push it over the limit.

Having it work in pre-view would likely be few hops, which is normal. I'm hoping SquareSpace sorts out how to take some of the hops they have (I know I have readers who have much tighter restrictions on the number of hops for things on their networks than Apple has in their OSes). 

@vanderwal

Interesting idea there that it could be a too many redirects issue.

On 5/16/2021 at 5:08 PM, creedon said:

@vanderwal

Interesting idea there that it could be a too many redirects issue.

It doesn't seem to be a too many redirects (or doesn't get to that), but the CSS that SquareSpace generates to get Google Fonts returns a 400 error as the problem. The request is 2nd in processing order, but malformed requests aren't getting through to Google.

The request from SquareSpace that is getting the 400 error is: https://fonts.googleapis.com/css2?family=Maven+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Voltaire:ital,wght@0,;0,400;0,700;1,;1,400;1,700

The error from SquareSpace is after Voltaire with the "@0,;" as some portion of that string is incorrect as that is what gets called out when trying that URL by itself.

I'm not a Google fonts expert but the quick reading I just did suggests that the SS generated URL is malformed. Sounds like a SS bug to me.

On 5/27/2021 at 11:38 PM, creedon said:

I'm not a Google fonts expert but the quick reading I just did suggests that the SS generated URL is malformed. Sounds like a SS bug to me.

If you drop the Google Font URL into a browser it is denied and if dev tools used it shows exactly where the SquareSpace error is located. 

Now the big question, how to get it fix. As a paying customer since 2010, I've never sorted out how to get SquareSpace to fix errors they introduce. Forums have usually been a quick way to get attention. But, if others have Google font issues in the past (I've noticed this on and off for a couple months) this really should have been fixed.

Quote

If you drop the Google Font URL into a browser it is denied and if dev tools used it shows exactly where the SquareSpace error is located. 

That is useful to know. But knowing the proper syntax is where being familiar with Google Fonts is important.

For a temporary workaround add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin repair malformed Google Fonts urls
      
      Version         : 0.1d0
      
      SS Versions     : 7.0, 7.1
      
      Dependancies    : jQuery
      
      Notes           : i am not a Google Fonts expert. this code is a
                        workaround for a specific malformation of GF urls that
                        SS has introduced to some sites
                        
      By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
      const selector = 'link[href^="https://fonts.googleapis.com/css2?"]';
      
      $( selector ).each ( function ( ) {
      
        const pattern = new RegExp ( '\\d+,;', 'g' );
        
        const $this = $( this );
        
        let href = $this.attr ( 'href' );
        
        if ( ! pattern.test ( href ) ) return true; // continue if no match
        
        href = href.replaceAll ( pattern, '' );
        
        $this
        
          .attr ( 'href', href )
          
          .appendTo ( 'head' );
          
        } );
        
      // end repair malformed Google Fonts urls
      
    } );
    
  </script>

Let us know how it goes.

Quote

Now the big question, how to get it fix.

The only official way is Contact Customer Support.