Отложенная загрузка Веб-шрифтов

Очень удобно использовать веб шрифты Google Fonts, однако они оказывают сильное влияние на первую загрузку сайта и им нельзя задать свойство "font-display: swap;". Следующий пример показывает как можно обойти это и добавить очков pagespeed:

const loadFont = (url) => {
  // the 'fetch' equivalent has caching issues
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = () => {
 if (xhr.readyState == 4 && xhr.status == 200) {
 let css = xhr.responseText;
 css = css.replace(/}/g, 'font-display: swap; }');

 const head = document.getElementsByTagName('head')[0];
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(css));
 head.appendChild(style);
 }
  };
  xhr.send();
}

loadFont('https://fonts.googleapis.com/css?family=Rammetto+One');

from: https://webformyself.com/google-fonts-i-font-display-osobennosti-vzaimodejstviya/

< link href="/fonts/source-serif-pro-400-latin.woff2" rel="preload" as="font" crossorigin="">

Дополнительное преимущество такого подхода заключается в том, что он полностью избавляет меня от проблемы, известной как FOUT — (flash of unstyled text, вспышка обычного шрифта).