How to fix font issues and random characters after migrating

ABOUT THIS:

Issues with fonts frequently happen after migration. You often find that your fonts are not loading correctly or icons have been replaced 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 FONTS

Go to the Customizer > Style > Typography where you can set your fonts and pick new fonts. 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 FONT

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

Your fonts should now be working as desired!