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 months 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 have an issue with the Icon font taking a little bit more time to load.

This can result in weird numbers and symbols showing 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 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.ttf" type="font/ttf" crossorigin="anonymous">

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

Divi - Integration Tab
Did this answer your question?