Add the `&display=swap` parameter to the end of your Google Fonts URL

[Studio RATATA]

Hi, Can you Add the &display=swap parameter to the end of your Google Fonts URL?
https://web.dev/font-display/?utm_source=lighthouse&utm_medium=unknown#google-fonts

This adds to the Google Lighthouse score

[prdt3e]

#403

[prdt3e]

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:

    if (!sessionStorage.fontsLoaded) {
        require(['webfontloader'], function(WebFont) {
            WebFont.load({
                google: {
                  families: [
                      'Roboto:400,700&display=swap'
                  ]
                },
                active: () => {
                    sessionStorage.fontsLoaded = true
                },
            });
        });
    }

Google Lighthouse score Mobil: 100
Google Lighthouse score Desktop: 100

Der gesamte Text bleibt während der Webfont-Ladevorgänge sichtbar.
All text remains visible during webfont loads

[prdt3e]

You can now optimize the whole thing with Preconnect / dns-prefetch.
This takes the loading time of the connection establishment to the target out of the consideration. In a test case, the Google programmer Ilya Grigorik saved about 0.5 seconds of loading time by adding Preconnect when loading the Google fonts and wrote a very informative article on this topic.

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Does anyone have more experience or tips here?

[Ole Marius Løset]

May I add that in order for display=swap to work, you need to add it only to the last font in the array.

you can achieve this by doing

const fonts = [ ... ] // what you'd normally pass to families: []
fonts.map((x, i) => x + variants + (i === fonts.length - 1 ? '&display=swap' : ''));

Adding on each item in the array passed to families will generate a request with multiple display=swap params.