Elementor Eicons Optimization

Elementor Eicons Optimization

Elementor plugin has its own font with icons used for the website interface. And, if you use that font with Elementor, you have noticed that it is often marked as render-blocking in performance tests. This small plugin solves that by embedding font CSS into page HEAD, and by adding the font-display property that the original code is missing.

Pros to using this plugin

• Elementor Eicons font will get proper font-display property
• The font will no longer be render-blocking

Cons to using this plugin

• The Eicons font CSS will be added to the page HEAD (small tradeoff)

How this plugin works

It is quite simple: it will remove Elementor Icons font registration, and then will load the font CSS file, add the missing font-display and will embed the whole CSS (around 10KB) into the page HEAD.