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

Activity

1. prdt3e commented on Apr 26, 2020

   

   prdt3e

   on Apr 26, 2020

   More actions

   #403
2. prdt3e commented on Apr 26, 2020

   

   prdt3e

   on Apr 26, 2020

   Last edited by prdt3e

   More actions

   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

   👍React with 👍1Reacted by Tapan Kumar Thapa

   ❤️React with ❤️1Reacted by Tapan Kumar Thapa
3. prdt3e commented on Apr 26, 2020

   

   prdt3e

   on Apr 26, 2020

   Last edited by prdt3e

   More actions

   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?

   👍React with 👍5Reacted by Oleksii, Hsin-lin Cheng, Jack Thompson, Raphaël Balet and Tai-Jiun Fang
4. olemarius commented on Mar 31, 2023

   

   olemarius

   on Mar 31, 2023

   More actions

   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.

   👍React with 👍1Reacted by Gabriel Livan