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 over 3 weeks ago

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?