Font Weight Problem

Hello -

I am working on a site that’s using the starter stack. I have created a couple of headline components that use the font “Lato.” For both, the user can select weather the font weight is regular (400) or bold (900).

The bold option is working fine on the homepage, but on an archive layout the bold font is displaying as 700 and not 900.

I’ve inspected the element with the lighter font-weight and it shows that it is 900 but it’s not displaying as such.

I did see this note from another user in the Beta forum - Font styles in Beta. Not sure if it’s relevant here or not, but I am not using the beta version of the theme.

The version currently installed on my staging website is Pro 6.5.15.

Any idea what’s up?

Hey @j0hnwat3rman,

Thanks for writing in! We would love to check your site. There could be a Mixed Content issue or other HTTPs that normally cause this. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Cheers.

Hello Ruenel - You can check out the staging website at https://ghirp.wpenginepowered.com

Username: demo
Password: password

If you compare the homepage with https://ghirp.wpenginepowered.com/about-us/ you’ll see the font issue I am talking about.

As noted and shared previously, I am using the starter stack. Also, it’s worth noting that the fonts display correctly within the cornerstone editor regardless of the page I am on.

From what I can tell, the font-weight of 900 is just not loading on pages outside of the homepage. I can see this by inspecting the element, looking at the sources and finding the google fonts that are loading. On the homepage, I see all the weights I’d expect. On the About Us page, I am not seeing the Lato with a font-wight of 900 loading.

This seems to be very similar to what was reported with the starter stack in the other thread I mentioned. You can see that here - Font styles in Beta.

Hello @j0hnwat3rman,

Thank you for the update.

The proper font weight is not displaying because of how the Lato font is loaded. This is how it is loaded on the home page:

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

And this is on the other pages:

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

As you can see, it’s not loading the 900 variation for some reason. We may need to access the site to check the issue further. Please provide the login details in the secure note.

Best regards,
Ismael

Just shared that info with you.

Thank you for the info.

We are not yet sure why the variation is not loaded, but we were able to temporarily fix it by adding this in the style.css file:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,900;1,900&display=swap');

We’ll have to check the issue further.

Warm regards.

Thanks for the follow up and for looking into this, however, I am still not seeing the font-weight of 900 loading reliably on the website.

For instance, it’s fine on the recently created contact page but it’s still 700 on several other pages, like the FAQ page, for instance.

Hello @j0hnwat3rman,

I have compared your FAQ page:

The one on the right is the actual page which has the 900. The left side is a CSS-edited page that is using 700.

You may need to clear your cache from the WPEngine dashboard. Clear your browser cache as well. Try using incognito mode or private browsing when checking the pages again.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.