In order to improve performance, we continue to focus on making fonts loading adjustments, and allow you to modify the default way Elementor loads Google Fonts.
Font-display property defines how font files are loaded and displayed by the browser. You can choose the loading method you wish using a designated control in your Elementor dashboard settings screen.
Google Font Loading Method Options
Go to Elementor > Settings > Advanced tab and change the Google Fonts Load to one of the options. From the dropdown menu, select from the following loading options:
- Default – The font display strategy is defined by the browser.
- Blocking – Hides the text until the font has fully loaded.
- Swap – Use a fallback-font to display, until the font has fully loaded.
- Fallback – Hides the text for a minimal period and will use the font only if loaded within a few seconds.
- Optional – Hides the text for a minimal period and will use the fallback-font unless the font is already fully loaded.
Note: Font Awesome libraries loading options – In v3.1 we updated Font Awesome libraries to include font-display: block property by default as Font Awesome recommends to eliminate the effect of render-blocking processes.