[Resolved] usage of font-display for generatepress.woff2

[Gökhan]

Hi there,i purchased the gbpremium is just to achieve very high score on pagespeed,could you please tell me the solution for pagespeed warning about generatepress.woff2 where it wants me to use font-display in css, i added the font-display in style.min.css where the font family is set but no success,please do a pagespeed test,you will understand what i mean at the very bottom

[Gökhan]

any chance on getting an answer?, i simply do not want to see generatepress.woff2 warning at all

[David]

Hi there,

Tom answers that here:

https://generatepress.com/forums/topic/google-lighthouse-warning-ensure-text-remains-visible-during-webfont-load/#post-789480

We aim to answer all requests within 12hrs, generally we are a lot faster as in this case. Also its worth searching the forum as a of lot answers are already available.

[Gökhan]

well sorry to say that but this isnt something to ignore, the font loads in 1.25 sec,thats a lot, and thats not something to ignore,basicly waiting for a solution

[David]

Google Pagespeeed does not reflect real timings as it simulates the test and adjusts them upon real world origin data of which they have not collected enough data on your site to give you a real result.

The font itself is only 1.3kb in size. I ran a GTMetrix report using a London Server on your site, here is the loading times related to the font:

As you can see the font takes 166ms to load.
6ms of this is the time it takes to load. The rest is waiting for your server to respond.

[Tom]

As of right now, that file is necessary if you want any icons on the site. However, it’s a tiny file (as David demonstrated above), so it has a very small impact on your page speed.

That being said, we’ll be introducing an inline SVG option in GP 2.3, which will remove it completely and make the theme that little bit faster.

Let me know if you’d like me to let you know when 2.3 is available for testing 🙂

[Gökhan]

i am ready anytime for real time user test of any beta with no hassle at all. Thanks for the good news

[Tom]

No problem – I’ll let you know 🙂

[sirlouen]

Hey @Tom
I think the solution to this is pretty useless but possible with a little tweak on your side

In line 770 of inc/css-output.php
It can be placed the font-display attribute with swap, as Google suggests
By doing this, the most useless thing ever for an icon font, you simply don’t show any icon while loading, therefore despite of being a micro-file, it doesn’t block rendering.

You have to remember that is not about size, but latency. It takes time to load resources, which block execution. It doesn’t really mind if it’s a 5 byte file: it has be fetched, therefore it blocks. With HTTP2 technically this is highly solved, but not all sites are using HTTP2 since most of the web is still under HTTP1.1

Also be aware, that Google it’s going to be really harsh onwards
https://blog.chromium.org/2019/11/moving-towards-faster-web.html

Essentially this may look like this:

$output = '@font-face {
                        font-display: swap;
                        font-family: "GeneratePress";
                        src:  url("' . $url . 'fonts/generatepress.eot");
                        src:  url("' . $url . 'fonts/generatepress.eot#iefix") format("embedded-opentype"),
                                  url("' . $url . 'fonts/generatepress.woff2") format("woff2"),
                                  url("' . $url . 'fonts/generatepress.woff") format("woff"),
                                  url("' . $url . 'fonts/generatepress.ttf") format("truetype"),
                                  url("' . $url . 'fonts/generatepress.svg#GeneratePress") format("svg");
                        font-weight: normal;
                        font-style: normal;
                }';

[Tom]

I think the best solution to this issue right now is to just use the SVG option in Customize > General.

However, I’ll look into this some more – looks simple enough to add swap to the font icons 🙂

Thanks for the feedback!

[sirlouen]

Didn’t know that you already implemented this feature
But just FYI with swap you solve this straight away. Unless you are planning on deprecating the font option, you should think on this for the future

[Riccardo]

Perhaps this can be helpful to add font-display:swap; for those familiar with the child theme:

Inside the file function.php, child theme add this line:

add_action('wp','on_off');
function on_off(){
remove_action( 'wp_enqueue_scripts', 'generate_enqueue_dynamic_css',50 );
}

this remove the function generate_enqueue_dynamic_css(); inside inc/css-output.php

Inside the file function.php child theme add this line:

add_action( 'wp_enqueue_scripts', 'genchild_enqueue_dynamic_css', 49 );

function genchild_enqueue_dynamic_css() {
	if ( ! get_option( 'generate_dynamic_css_output', false ) || is_customize_preview() || apply_filters( 'generate_dynamic_css_skip_cache', false ) ) {
		$css = generate_base_css() . generate_font_css() . generate_advanced_css() . generate_spacing_css();
	} else {
		$css = get_option( 'generate_dynamic_css_output' ) . '/* End cached CSS */';
	}

	$css = $css . generate_no_cache_dynamic_css() . genchild_do_icon_css();

	wp_add_inline_style( 'generate-style', $css );
}

function genchild_do_icon_css() {
	$output = false;

	if ( 'font' === generate_get_option( 'icons' ) ) {
		$url = trailingslashit( get_template_directory_uri() );

		$output = '@font-face {
			font-family: "GeneratePress";
			src:  url("' . $url . 'fonts/generatepress.eot");
			src:  url("' . $url . 'fonts/generatepress.eot#iefix") format("embedded-opentype"),
				  url("' . $url . 'fonts/generatepress.woff2") format("woff2"),
				  url("' . $url . 'fonts/generatepress.woff") format("woff"),
				  url("' . $url . 'fonts/generatepress.ttf") format("truetype"),
				  url("' . $url . 'fonts/generatepress.svg#GeneratePress") format("svg");
			font-weight: normal;
			font-style: normal;
      font-display:swap;
		}';

		if ( defined( 'GENERATE_MENU_PLUS_VERSION' ) ) {
			$output .= '.main-navigation .slideout-toggle a:before,
			.slide-opened .slideout-overlay .slideout-exit:before {
				font-family: GeneratePress;
			}

			.slideout-navigation .dropdown-menu-toggle:before {
				content: "\f107" !important;
			}

			.slideout-navigation .sfHover > a .dropdown-menu-toggle:before {
				content: "\f106" !important;
			}';
		}
	}

	if ( 'svg' === generate_get_option( 'icons' ) ) {
		$output = 'button.menu-toggle:before,
		.search-item a:before,
		.dropdown-menu-toggle:before,
		.cat-links:before,
		.tags-links:before,
		.comments-link:before,
		.nav-previous .prev:before,
		.nav-next .next:before,
		.generate-back-to-top:before {
			display: none;
		}';
	}

	if ( $output ) {
		return str_replace( array( "\r", "\n", "\t" ), '', $output );
	}
}

This overrides the functions and adding the declaration font-display:swap;
In my website it works fine and the audit of lighthouse test pass

[Richard]

Hi,

Can you supply a simply CSS coding that will stop this happening it is causing quite a google issue.
Richard

[David]

Hi there,

is this for the generatepress.woff ? If so the best fix is to use set the Customizer > General > Icon Type to SVG. Make sure to clear any caches after making that change, this will remove the font request altogether.

[Richard]

Hi,

I have about 30 pages to do great thanks

Richard

[Author]

Posts