Cloudflare worker script for modifying the White House page's HTML and CSS (https://nooshu.github.io/blog/2021/01/23/the-importance-of-font-face-source-order-when-used-with-preload/)

index.js

// set the site we are modifying
const site = 'www.whitehouse.gov';

// do this on a fetch
addEventListener('fetch', event => {
  const request = event.request
  const url = new URL(request.url)
  event.respondWith(handleRequest(request)) 
});

// default CSS for the White House website
let pageStyling = `<style>[WHITE_HOUSE_CSS_HERE]</style>`

// font face rules removed from above CSS for easy modification
let fontFaces = `<style>
@font-face{
  font-family:MercurySSm-Medium-Pro_Web;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.svg#MercurySSm-Medium-Pro_Web) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.woff) format("woff");
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:MercurySSm-MediumItalic-Pro_Web;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-MediumItalic-Pro_Web.svg#MercurySSm-MediumItalic-Pro_Web) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-MediumItalic-Pro_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-MediumItalic-Pro_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:MercurySSm-Book-Pro_Web;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Book-Pro_Web.svg#MercurySSm-Book-Pro_Web) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Book-Pro_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Book-Pro_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:MercurySSm-BookItalic;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BookItalic.svg#MercurySSm-BookItalic) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BookItalic.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BookItalic.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:MercurySSm-Bold-Pro_Web;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Bold-Pro_Web.svg#MercurySSm-Bold-Pro_Web) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Bold-Pro_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Bold-Pro_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:MercurySSm-BoldItalic-Pro_Web;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BoldItalic-Pro_Web.svg#MercurySSm-BoldItalic-Pro_Web) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BoldItalic-Pro_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BoldItalic-Pro_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:MercuryTextG2-Semibold-Pro_Web;
  src: url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Semibold-Pro_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Semibold-Pro_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:MercuryTextG2-Roman-Pro_Web;
  
  src: url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Roman-Pro_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Roman-Pro_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-Book;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.svg#Decimal-Book) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-BookItalic;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BookItalic.svg#Decimal-BookItalic) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BookItalic.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BookItalic.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-Medium_Web;
  src: url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Medium_Web.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Medium_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-MediumItalic_Web;
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-MediumItalic_Web.woff2) format("woff2"),
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-MediumItalic_Web.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-Semibold;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.svg#Decimal-Semibold) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-SemiboldItalic;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-SemiboldItalic.svg#Decimal-SemiboldItalic) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-SemiboldItalic.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-SemiboldItalic.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-Bold;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Bold.svg#Decimal-Bold) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Bold.woff2) format("woff2")'
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Bold.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
@font-face{
  font-family:Decimal-BoldItalic;
  src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BoldItalic.svg#Decimal-BoldItalic) format("svg"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BoldItalic.woff2) format("woff2"),
  url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BoldItalic.woff) format("woff");
  
  font-weight:400;
  font-style:normal;
  font-display:block
}
</style>`;

// the modified preloads to be added back into the head
var preloads = `
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Medium_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Roman-Pro_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Semibold-Pro_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
`

async function handleRequest(request) {
  // store the URL
  const url = new URL(request.url);

  // disallow crawlers (write a robots.txt file)
  if(url.pathname === "/robots.txt") {
    return new Response('User-agent: *\nDisallow: /', {status: 200});
  }

  // when overrideHost is used in a WPT script, WPT sets x-host to original host i.e. site we want to proxy
  // store the value of x-host
  const xhost = request.headers.get('x-host');

  // If this header is missing, abort
  if(!xhost) {
    return new Response('x-host header missing', {status: 403});
  }

  // set our hostname to that listed in the xhost header
  url.hostname = xhost;

  // look for header that allows us to bypass the transform entirely
  const bypassTransform = request.headers.get('x-bypass-transform');

  // get the accept header to allow us to examine the type of request it is
  const acceptHeader = request.headers.get('accept');

  // check our x-host header matches the site we are testing and we aren't trying to bypass the transformation
  if(xhost === site && (!bypassTransform || (bypassTransform && bypassTransform.indexOf('true') === -1))){

    // check to see the request is for the HTML page
    if(acceptHeader && acceptHeader.indexOf('text/html') >= 0){
      // store this particular request for modification
      let oldResponse = await fetch(url.toString(), request)
      // create a new response
      let newResponse = new HTMLRewriter()
        // remove the original preloads
        .on('link[rel="preload"]', new removeElement())
        // add the new, modified preloads
        .on('head', new addPreloads())
        // remove the original CSS
        .on('#theme_css-css', new removeElement())
        // add the modified `@font-face` rules 
        .on('head', new addFontStyling())
        // add the rest of the page styling
        .on('head', new addPageStyling())
        // apply above modifications to the response
        .transform(oldResponse)

        // return the modified page
        return newResponse
    }
  }

  // otherwise just proxy the request unmodified
  return fetch(url.toString(), request)
}

class removeElement {
  element(element) {
    element.remove();
  }
}

class addPreloads {
  element(element) {
    element.prepend(preloads, {html: true});
  }
}

class addFontStyling {
  element(element) {
    element.append(fontFaces, {html: true});
  }
}

class addPageStyling {
  element(element) {
    element.append(pageStyling, {html: true});
  }
}