Load Google Fonts Asynchronously - not loading all weights with css2

[kokers]

Looks like google fonts are not fully loaded when the embed code uses the new API css2. Only the default weight (400) is being pulled.

Url is build like this: https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap

Looks like webfontloader doesnt handle css2 correctly. Might need a library update. Found one very old issue still open https://github.com/typekit/webfontloader/issues/430 Not sure when google made a switch, but they generate embed codes now on google fonts with the css2 links.

Old API with links https://fonts.googleapis.com/css?family=Manrope:300,400,600,700,800 work ok.

[timotei-litespeed]

@kokers Are you able to test some changes to the plugin files?

[kokers]

@timotei-litespeed sure, let me pull this commit and test it. Will let you know if that fix it.

[timotei-litespeed]

@kokers quick answer :)) I've been testing the updated that code and seems it works.

[timotei-litespeed]

Just try on a staging site. That code is in development.

[timotei-litespeed]

Maybe take just the JS files content

[kokers]

Sorry it took a bit but needed to make sure. Of course doing this on staging no worries.

It doesnt work. I had originally just a code in wp_head hook that is a full embed code generate by google, swapped to the wp_enqueue_style to make sure, but it doesnt work.

You can see that its not, cause in sources the CSS url includes css instead of css2

This is when Load Google Fonts Async is OFF

This is when Load Google Fonts Async is On

This is the code for font:

wp_enqueue_style('qc-font-Manrope', 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap', [], '1.1');

[timotei-litespeed]

Does the page have multiple google font links?

[timotei-litespeed]

I see the same thing, but the fonts are loaded

[kokers]

They are loaded with only single weight. look at the CSS that has been pulled. it's only 400. All other weights are missing.

This is correct source that we should see:

It's not that font is not loaded. It's that only default (400) weight is, cause css API cant interpret the :wght@200..800 part. if its loaded with css2 it loads all defined weights in url.

Now it's time to figure out if it's a webfontloader issue, or there is some swap happening in LS cache plugin that changes css2 url to css which causes the issue.

[timotei-litespeed]

That webkit version is oldddd But the font will load and show(LIMITED!).

I tried to add css2(as in other pull requests) but no luck. I am trying to find support for both V2 and V1.

[timotei-litespeed]

New commit: https://github.com/timotei-litespeed/lscache_wp/commit/150c21484a774f6d819863571d84861b98f220a5

How I tested: functions.php

function add_google_fonts() {
    wp_enqueue_style( 'add_google_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,800', false );
    wp_enqueue_style( 'add_google_fonts2', 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playwrite+ES+Deco:wght@100..400&family=Playwrite+US+Trad:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap', [], null );
    wp_enqueue_style( 'add_google_fonts3', 'https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Maname&family=Playwrite+HR+Lijeva:wght@100..400&family=Playwrite+HU:wght@100..400&display=swap', [], null);
    wp_enqueue_style( 'add_google_fonts4', 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap', [], null);
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array());
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

style.css

.font_1{ font-family: "Open Sans"; font-weight: 800; font-size: 44px; font-style: normal; }
.font_2{ font-family: "Manrope"; font-weight: 300; font-size: 44px; font-style: normal; }
.font_3{ font-family: "Poppins"; font-weight: 400; font-size: 44px; font-style: normal; }
.font_4{ font-family: "Playwrite ES Deco"; font-weight: 400; font-size: 44px; font-style: normal; }
.font_5{ font-family: "Playwrite US Trad"; font-weight: 100; font-size: 44px; font-style: normal; }

[timotei-litespeed]

One thing I needed to add is: ....1,900&display=swap', [], null ); change version parameter to value null Testing with LSC off I saw that only first font was loaded, and the rest were ignored. Also updated webfont loader

@kokers sorry for late answer

[timotei-litespeed]

I have revisited my work and the correct test will be from: https://github.com/timotei-litespeed/lscache_wp/commit/e72f969aa1bcc234c9663dace1a2fbfe4a738312

Still the wp_enqueue_style paramers 2 and 3 needs to be present. wp_enqueue_style( 'add_google_fonts2', 'https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Maname&family=Playwrite+HR+Lijeva:wght@100..400&family=Playwrite+HU:wght@100..400&display=swap', [], null); Without them the multiple families will remain 1 only

[kokers]

Will test on Monday and confirm :)

[kokers]

This doesn't work. It pulls the first weight only and not all of them. With the syntax 100...400 it needs to pull 100,200,300,400 so the https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&display=swap needs to become: https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700,800

Essentially current fix is how it worked in the moment I posted the issue, cause font loader was able to get only the first one and ignored the rest of the syntax.

[timotei-litespeed]

Beside that, is there other bugs?

[kokers]

No, but the issue I submitted is about that.

Only the default weight (400) is being pulled.

So this solution doesnt change anything apart from adding extra code.

[timotei-litespeed]

But if you have italic you have to also get italic 300, italic 400, italic 500...

Yes?

[kokers]

Good catch. yes.

[timotei-litespeed]

This should fix: https://github.com/timotei-litespeed/lscache_wp/commit/2bd5a5338cc93efbfdf6a28f9097588dd304547b

[kokers]

Nice! Looks like it works now, thank you

[timotei-litespeed]

The solution is limited la what CSS v1 can do, but will do the trick for now. We will see what exactly will be the final solution and how we will integrate in future releases.

[timotei-litespeed]

And thank you for testing the solution :)