Question

Elementor Loading Useless Fonts

  • 17 August 2021
  • 3 replies
  • 50 views

Userlevel 1
Badge

Why does elementor load a TON of Google fonts that arent being used?

 

See my pastebin. 

https://pastebin.com/C75YmSEg

 

We only want fonts being used to load for obvious reasons.  We have set the settings to disable default fonts and colors and I have even used a function to try and disable Elementor from loading Google fonts completely.

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

 


3 replies

Userlevel 1
Badge

As usual NO RESPONSE WHATSOEVER.

Further testing shows that this command

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

shown on your documentation as the method for removing Google Fonts actually removes Font Awesome also.

Userlevel 6
Badge +3

You could use the Autoptimize Pluginand use the Remove Google Fonts setting.

Userlevel 4
Badge +2

It is not Elementor’s Fault, Elementor uses Google Fonts API that it and they do not have any control over Google fonts.

Do you know why Google fonts have large number of Font Face declarations?

It is mainly for Browser & language support.

 

Elementor by default loads Roboto font-family as a Global Fonts, this can change it to any Google Fonts or Custom fonts you uploaded or use Theme fonts.

Why there is lots of unused Fonts-face?

@font-face declaration does not trigger font download. Rather, a font is downloaded only if it is referenced by styling that is used on the page. For example, like this:

@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
font-family: "Open Sans"
}

You can get the best practices from web.dev font best practices

 

This filters applies to Google Fonts, Font awesome & Elementor’s icons (Eicons) and you can confirm it in Page Source Code or Chrome Dev tools Network panel

A Bit of warning though unknowingly don’t adds this filters, this will improve your site performance  but it can hurt your UX.

Because Hamburger & Close icons, Search icons, submenu etc. uses Eicons, FontAwesome respectively.

 

You can see the impact on my FAQ section, if you’re interested.

//Google Fonts

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );


//For Font Awesome:

add_action('elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );


//For Eicons:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}

I guess I answer all your question, if you need any helps post it here.

Reply