Custom fonts can significantly enhance your website's visual appeal and branding. However, rendering issues such as incorrect display, poor readability, or inconsistent appearance across different browsers can detract from the user experience.
In this article, we will guide you through the process of fixing rendering issues of custom fonts on your website.
Our step-by-step instructions will help you optimize font performance, improve readability, and maintain a professional look across all devices and browsers.
Perfect for website owners, designers, and developers, this guide will equip you with the knowledge and tools to resolve custom font rendering issues, ensuring a polished and cohesive visual presentation.
Note: If you encounter an issue when uploading custom font files, please check the How to Fix the "Sorry, you are not allowed to upload this file type" Error article for more information.
Check that the font files exist on your server
Open your website on the front end
Right-click on your page and choose Inspect
Switch to the Console Tab
Look for any 404 errors regarding your font files
If there are 404 errors, use an FTP connection or your hosting File Manager app and re-upload the font files to the wp-content/et-fonts folder
Check that the font files are loaded from the correct HTTP Protocol
Open your website on the front end
Right-click on your page and choose Inspect
Switch to the Console Tab
Check for Mixed Content errors
If there are Mixed Content errors, go to WordPress Dashboard → Plugins → Add New plugin
Install and activate the Really Simple SSL plugin
Check your website again. All the Mixed Content errors should be resolved, and the custom font should be rendered correctly.