Certain Google Font(s?) Not Loading Correctly

[amst_ws]

I’m using Pro 4.0.11 and I’m tring to use the Neuton Font provided by Google, but it’s not appearing on my site.

I looked at the link produced by Pro, and found this:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,400i,700,700i%7Cneuton:700&amp;subset=latin,latin-ext&amp;display=auto" type="text/css" media="all" data-x-google-fonts="">

The reason it’s not appearing is because Pro has outputted the wrong family name. It should be Neuton, not neuton (case-sensitive). I’m not sure if this is affecting any other fonts.

[matt]

Hi @amst_ws,

I have tested for this using Pro 4.0.11 and but I am unable to replicate the problem. You can see from the following screenshot that the output is correct:

This would suggest that the problem is connected to your specific setup. First of all, I’d just like to confirm that you are adding the font correctly. Google fonts are available directly within the theme, so they should be added in the Font Manager. Please check the article here and ensure that you are adding them as outlined there (not for example, as a custom font).

Assuming that you have added the font correctly, then we need to rule out some common issues that might be affecting your setup. Please review the troubleshooting article here, and follow the steps for these sections:

• Testing for Plugin Conflict
• Child Theme
• CSS/JS Customization
• Disabling Cache
• Disabling CDN
• Version Compatability

If after checking all of the above the problem persists, we will need to investigate further, in which case please then provide the following in a secure note:

• The site login URL
• Username
• Password
• Confirmation that we can access and make changes to your site

You can add a secure note by clicking on the key icon beneath your post.

Hopefully the troubleshooting steps will help you to identify the culprit and resolve the issue, but do reach back out if you still need assistance.

[amst_ws]

Hi @matt, thanks for getting back to me.

When using the Font Manager, the font works without issue. However, if I disable the Font Manager and use the Typography settings to select the font, the issue occurs. I’ve added the site to a secure note so that you can check and see for youself. The site is our staging site, so feel free to make any changes you want. Following the
troubleshooting article did not help, so I believe it is a bug.

The specific toggle that causes the issue is “Theme Options > Typography > Enable Font Manager”.

[marc_a]

Hi @amst_ws,

I just check your website and compare your Neuton font activating the Enable Font Manager and not activating it, they are just loading correctly. I am not quite sure why it is not loading correctly on your end comparing the two fonts when activating and not activating the Enable Font Manager. Can you please provide us a screenshot for both scenarios showing that they not loading correctly?

Hope that helps.

Thank you.

[amst_ws]

Interesting… it seemed to fix itself. However, I was able to get the issue to come back by resetting the Font Manager fonts back to Helvetica. Now, the behaviour is as I described (Neuton font is not loaded correctly without Font Manager).

Here are some screenshots:
Font Manager Enabled (Using Helvetica for both Body and Header):

Font Manager Disabled:

And here’s the full link that’s pictured above:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,400i,700,700i%7Cneuton:700&amp;subset=latin,latin-ext&amp;display=auto" type="text/css" media="all" data-x-google-fonts="">

[ruenel]

Hello @amst_ws,

When you enable the Font Manager, you will need to go to the Font manager and assign the “Neuton” font to the Headings.

To be familiar with the Font Manager, please check this documentation:

• https://theme.co/docs/font-manager

Hope this helps.

[amst_ws]

That’s not the issue I’m trying to report.

The issue occurs when the Font Manager is NOT being used. The font should load correctly even if the font manager is not being used, but it doesn’t.

[amst_ws]

I began to do my own debugging. I started off thinking the bug lied in the PHP files.

In the PHP files, I found that the Google Fonts request is cached, which explains why the bug disappeared after using my font with the Font Manager (the Font manager does not have this bug, and its Google Fonts request is the one that got cached). Continuing to debug, I found the issue did not lie in the PHP files, but within the React components.

However, due to the fact that the production JavaScript is minified, it would require much more effort on my end to pinpoint exactly where this bug lies. So I’ll provide all the info needed and leave the rest to you wonderful people. The bug is caused, from what I can understand, by the lowercase family names used for the value of each option in the select box (pictured below):

This value option is then used by a React component and saved in the database (see the x_headings_font_family on the right of the following photo):

Any developer with this info should be able to pinpoint the bug, and get it fixed with ease!

[amst_ws]

I’ve confirmed this issue by selecting a Google Font that has a space in its name:

Link Produced:

Instead of abhayalibre, it should read Abhaya+Libre.

[ruenel]

Hello @amst_ws,

Thank you for this feedback. I’ve submitted your feedback to our issue tracker so the developers will be made aware of it. Once they’ve fixed this, it will be updated and integrated with the next release cycle.

Please bear with us.

[amst_ws]

Thank you .

[tristup]

Hi @amst_ws,

You are most welcome.