Simplified script for injecting fonts into WebPageTest

simplified-wpt-font-injection.js

(function(){
  // this will trigger a font load
  var customFont1 = new FontFace('custom font name', 'url([FONT_URL_HERE])', {
    display: 'block', // display setting to test here
    weight: '700' // font-weight
    // other font properties here
  });
  
  // IMPORTANT: add the font to the document
  document.fonts.add(customFont1);

  // monitor the font load (optional)
  customFont1.loaded.then((fontFace) => {
    // log some info in the console
    console.info('Font status:', customFont1.status); // optional
    // log some info on the WPT waterfall chart
    performance.mark('wpt.customFont1Loaded'); // optional
  }, (fontFace) => {
    // if there's an error, tell us about it
    console.error('Font status:', customFont1.status); // optional
  });

  // repeat above for multiple fonts

})();