Skip to main content

How to Preload Divi's Icon Fonts

Learn how to preload ET Icon fonts (modules.ttf) for improving your website's performance and the user experience.

Updated yesterday

Preloading Divi's icon fonts can significantly enhance your website's performance by ensuring icons load quickly and smoothly. This proactive step helps improve page load times and provides a better user experience, especially for visitors using slower connections.

Sometimes, you may experience an issue with the Icon font taking a little longer to load.

This can result in unusual numbers and symbols appearing for a few seconds while the page is loading, instead of the actual icons.

Divi - Icons are not rendering

Using services such as Google Page Speed Insights, you might see a report regarding the Preload key requests issue and recommending adding preload for the modules.ttf file:

Google Page Speed Insights - Preload Key Requests

To fix this, you can add preload to the icons font file following these steps:

  1. Log in to your WordPress Dashboard

  2. Go to Divi → Theme Option → Integration tab → Header

  3. Add the following HTML code:

    <link rel="preload" as="font" href="https://yoursite.com/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.ttf" crossorigin="anonymous">

In the above code, replace https://yoursite.com with your main site's home page URL.

Divi - Integration Tab

Did this answer your question?