Fonts not appearing correctly

Hello, our fonts are not appearing correctly, this seems to happen after most updates. When I go into the theme options CSS editor, the fonts flash on and off like it is having trouble loading

Hello Alexis,

Thanks for asking. :slight_smile:

Please follow up the steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Go to X > Settings and click on the Clear Style Cache button.
  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
  4. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see 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.
  5. Remove custom CSS and Javascript from the options or Child Theme and test the case.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

Hello,
Our theme is up to date. I cleared to Clear Style Cache button. We are not using a CDN. I deactivated all of the plugins but did not have any solutions. And we do not have any custom CSS as far as I know? Please let me know if you have other ideas, thanks!

Hi,

I would like to check but your site seems to be down at the moment.

I have tried multiple times but still not loading.

Kindly check with your hosting provider and let us know.

Thanks

It is back up now, sorry about that, GoDaddy was running maintenance

Hello Alexis,

It seems that there is a JS error on the page. This could be the cause of the issue or may have just been a caching issue. Would you mind disabling the WP Super Cache first? And if it does not resolves the issue, a 3rd party plugin may have cause the JS error. You could 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.

If everything fails, please provide us access to your site so that we can take a closer look. You can create a secure note and add your login credentials. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

I tested plugins originally and it did not fix it, just re tested them all and still did not work. Attaching login info here though

Hi Alexis,

It appears your site is pulling the font file to the URL that no longer exist. Examples,

https://www.ironwoodfinance.com/wp-content/themes/x/framework/fonts/Norwester-Regular.woff
https://www.ironwoodfinance.com/wp-content/themes/x/framework/fonts/Norwester-Regular.woff2

Are those the font you’re expecting to see? If yes, please upload them in your child theme and update any of your CSS that uses those URL with the new URL.

And please make sure to install a fresh copy of your child theme, your current inactive child theme has set of files that cause display conflicts.

Thanks!

Thank you fixed the fonts!!

I am not sure by what you mean:

"And please make sure to install a fresh copy of your child theme, your current inactive child theme has set of files that cause display conflicts.

I need to activate a child theme?

Thank you

Hello Alexis,

Even if you fixed the fonts, you are still doing it incorrectly. When there is a theme update, all of your fonts will be overwritten and you will still encounter this issue. To be able to apply the fonts the correct way, please do this:

  • Please update your custom css:
@font-face {
    font-family: 'Norwester';
    src: url('https://www.ironwoodfinance.com/wp-content/themes/x-child/framework/fonts/Norwester-Regular.eot');
    src: url('https://www.ironwoodfinance.com/wp-content/themes/x-child/framework/fonts/Norwester-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://www.ironwoodfinance.com/wp-content/themes/x-child/framework/fonts/Norwester-Regular.woff2') format('woff2'),
        url('https://www.ironwoodfinance.com/wp-content/themes/x-child/framework/fonts/Norwester-Regular.woff') format('woff'),
        url('https://www.ironwoodfinance.com/wp-content/themes/x-child/framework/fonts/Norwester-Regular.ttf') format('truetype'),
        url('https://www.ironwoodfinance.com/wp-content/themes/x-child/framework/fonts/Norwester-Regular.svg#Norwester-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
  • Activate your child theme.

  • Upload the fonts in the child theme’s folder /wp-content/themes/x-child/framework/fonts/

If you need anything else, please let us know.

activating the child theme breaks the website, i am not sure what i am doing wrong?

Hello Alexis,

Before you activate the child theme, please clear your caches first. And after you activate the child theme, you also need to clear the cache again.

We would loved to know if this has work for you. Thank you.

I deleted the cache but it still broke the site, here is an image of what it did. reactivated X Version: 6.4.6 and it works again

Hi Alexis,

That is what Rad’s meant on his reply above.

Please back-up and delete your current child theme, and then install a fresh copy of child theme, then do Ruenel’s instruction on that new child theme.

Cheers!

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