Pass Google Lighthouse with webfontloader - Preload fonts

[Yago Gonzalez]

Hi,

Similar to #389, webfontloader is not passing the Lighthouse test because is not rel=preload, as you can see in the next img:

There is any option to make it so?

Please, notice that I'm using it through the npm package in React like this:

import WebFont from "webfontloader";
const Typography = () => {
  WebFont.load({
    classes: false,
    events: false,
    google: {
      families: ["Open Sans:400,400i,700", "sans-serif"]
    }
  });
};

Thanks!

[James Pfleiderer]

I see the same issue in my Lighthouse tests. Is it just a false positive? Still would be nice to fix this either way.

My font is loaded in a minified JS file on a WordPress website, like so:

WebFont.load({ google: { families: ['Barlow:400,400i,700,800'] } });

[Eduardo Aranda Hernández]

I also can't pass the lighthouse test.
I think this is a false positive, as the prefixed css classes only work when fonts finished loading.

But would be awesome to know how to make it pass the test and show off to the clients.. and get the almost impossible 100% lighthouse score ;-)

btw, the page is https://bbfertilityexperts.com/

[rotexhawk]

Would like to see this as well. We could also dns-prefetch google font domains for extra performance.

[Santhosh]

Is this issue getting any support? I have the same issue and any suggestion for adding the config to link tag would be great! Thanks

[Dave]

any progress here ?

[Anderson G. Porto]

no, project abandoned

[Eduardo Aranda Hernández]

Is this still the best way to do it? (March 2019)

[Jakub Sarnowski]

@eduardoarandah For best practices check out Zach Leatherman's blog.

[prdt3e]

@eduardoarandah
In head, if the font is cached:
<script>sessionStorage.fontsLoaded&&document.documentElement.classList.add("wf-active");</script>

And load webfontloader async with font-display: swap:
WebFont.load({ google: { families: [ 'Roboto:400,700&display=swap' ] }, active: () => { sessionStorage.fontsLoaded = true } });

[Vadorequest]

I don't pass LightHouse tests either. See GoogleChrome/lighthouse#10892 (comment)

Is https://www.zachleat.com/web/comprehensive-webfonts/ the best/most up-to-date way to do that, as of 2020?

[Vadorequest]

Eventually managed to get it working.

GoogleChrome/lighthouse#10892 (comment)

[Raphaël Balet]

@Yagogc or @bramstein I think you can close your issue since this seems to have been fixed by the following GoogleChrome/lighthouse#10892 (comment)