Issues with fonts

Hello there,

We have configured a font, Raleway, to load for various weight (200,300,600,700,800).

However when I check at the HTML for our home page, searching for Raleway only returns a reference to “ultimate-google-fonts-css” which is from a plugin (I would need to remove that) loading a different set of font-weight…

Then we have this bit after the x-generated-css:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Raleway:600|Lato:700|Arimo:700&amp;subset=latin,latin-ext" type="text/css" media="all" data-x-google-fonts="">

It makes me think that this is the X output because there’s both our body and heading fonts loaded, but it’s not loading all selected font-weight. I’m also not too sure what Lato and Arimo are doing here.

I have added a link to our site as a secure note.

Waiting for your feedback!

Thank you.

Hey @thisisbbc,

Yes, that is the one loaded by X and that is dynamic. That means that X only loads fonts when it’s used by an element in the page and in Theme Options.

When you said:

I believe you’re referring to configuring the font in the Font Manager? The Font Manager does not load fonts in the front-end. Its job is to enable you to use the font configured in it inside Theme Options and the builders.

With that said, if you need different font weights to be loaded, they must be used by elements in the page. Or, you should use a third party font plugin to load the font.

Just note that loading different font weights even from the same font will add up to your page load time. This is an important thing to consider.

Thanks.

Hello Christian,

Thank you for the reply, I better understand my problem now (trying to use a font-weight set in Font Manager on a WC archive page where no Pro elements are displayed will not work).

I guess I’ll have to wait for the next major release with the Layout module that will enable customization of custom post type like the WooCommerce products archives. I could also probably load the stylesheet via a custom function, but I don’t really like this option.

I’m still a bit puzzled by a few things…

#1 - Since you mentioned the performance impact of loading fonts… Why is Pro loading Lato and Arimo? We don’t have these selected in the font manager. These are fonts loaded (wrongfully) by another plugin. Is the Pro request being hijacked by one of our plugin?

#2 - I’m seeing Open Sans loaded for 400,400i,700,700i,300,300i,600,600i on our home page. We clearly don’t use that much font-weight. Not sure if this is related to #1.

Waiting for your feedback!

Thank you

Please check all of the font family settings in Theme Options if Lato, Arimo and Open Sans is used. If they’re selected in the Theme Options, they shouldn’t load multiple font weights though so if the result is positive, I’ll post this in our issue tracker.

To check if a plugin is conflicting with the Google Font loading of X, please do try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Also use the parent theme when testing.

Thanks.

Hello Christian,

Here’s where I’ve looked at…

  • Theme Options > Typography > Open Sans / Raleway
  • Theme Options > Settings (Gear icon) > Fonts > Open Sans / Raleway

The weight selected are…

  • Open sans: 300,400,600,700
  • Raleway: 200,300,400,600,700,800

Here’s the line generated by X:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Raleway:600|Lato:700|Arimo:700&amp;subset=latin,latin-ext" type="text/css" media="all" data-x-google-fonts="">

Tested with the default Pro theme, all plugins deactivated and our cache cleared.

Waiting for your feedback!

Thank you

Lato and Arimo are loaded from the Theme Options > Header even if you’re using the Pro Header. I believe this should not be the case so I’ll post this in our issue tracker.

For now, please switch to the Classic Header to temporarily choose a system font for the Logo and Navigation. After that, you can use your Pro header back.

Thanks.

Hello Christian,

Good catch, I was able to remove these.

I think that’s all for this thread.

Thank you!

You’re welcome!
We’re glad @Christian_y were able to help you out.

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