About this:

After migration you often find that your font is not loading correctly or icons have been replace by random characters. In this article we’ll get it back up swiftly. When inspecting the site you will find 404 errors on .WOFF files which indicate that the font files are missing.

Are fonts really missing?

Check if the fonts are really missing, and not just a caching issue. You can clear the cache and force reload the page (SHIFT + F5). Should the page still show incorrect fonts/icons. Check the console.

How to check the console?

Open the console by pressing F12 key on your keyboard or right click on the page and click “Inspect”.
You will now see the HTML of the page. This is called the “Developers Tool”. On top of the Developers Tool you see some options, one of which is “Console”. If the console contains lines (in red) with a .WOFF source it is caused by a font error.

Should you want to know more about troubleshooting with the developers tool; How to use the console for troubleshooting.

Fonts are really missing

Now that we are sure that it is a font issue. It is usually caused by a change in the source URL (as is with site migrations). The solution is fairly simple: Refresh the fonts!

We can refresh the fonts by deleting old fonts and import them as new. To do this we want to have a file manager ready. This can be done through a few ways:

  • FTP connection with your preferred software like FileZilla.
  • File manager trough your hosting dashboard.
  • File manager trough plugin in your WordPress installation like the plugin “File Manager”.

In the File Manager navigate to the ‘fonts’ folder found in /wp-content/.
Let’s refresh them!

Refreshing the fonts

With the File Manager at the ready we can refresh the fonts in 3 simple steps. This takes only a few minutes or seconds depending on how often you’ve done this:

Select temporary font

Go to the Customizer > Style > Typography where you can set your fonts and pick a new font. 1 font below or above your selected font is fine. It is only temporary. Once selected for all necessary fonts, Publish the changes

Delete old fonts

In the File Manager go into the ‘fonts’ folder and you should now see your newly selected font. If not, refresh by re-entering the folder or refreshing the FTP connection. If you see the newly selected font, delete all the old font folders.

Select your fonts

Now those are deleted you can go back into the Customizer > Style > Typography and select your desirable font. Publsih the changes and fresh font folders will be created.

Your font should now be working as desired!

Stay Connected

Get in touch

Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.