Change Quickbase Font Throughout App

so my solution here is to:
A) Download the CSS file quickbase uses, then
B) Edit them in your choice of editor,
- personally i have both a visual code environment setup and Sublime Text 3
- Both with a tonne of pluggins to flow chart my code, push to Team Foundation Server to work with my team, ESlint for code syntax checking and highlight colours + much much more, i
- Two you ask? yer when im feeling in the mood for something different i swap (spending days at a time looking at the same interface i find tiresome).
- Use regular expression to strip all colour references for rgb, hsl/a and #. below will save you some trouble building one :). 
var cssColors = RegExp(/#(?:[a-f\d]{3}){1,2}\b|rgb\((?:(?:\s*0*(?:25[0-5]|2[0-4]\d|1?\d?\d)\s*,){2}\s*0*(?:25[0-5]|2[0-4]\d|1?\d?\d)|\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%(?:\s*,\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%){2})\s*\)|hsl\(\s*0*(?:360|3[0-5]\d|[12]?\d?\d)\s*(?:,\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%\s*){2}\)|(?:rgba\((?:(?:\s*0*(?:25[0-5]|2[0-4]\d|1?\d?\d)\s*,){3}|(?:\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%\s*,){3})|hsla\(\s*0*(?:360|3[0-5]\d|[12]?\d?\d)\s*(?:,\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%\s*){2},)\s*0*(?:1|0(?:\.\d+)?)\s*\)/);
- With your favourite tool and a highlighters plugin you will see every colour as they are - do yourself a favour and remove duplicates then start matching the colours you want to use in a split screen.
- do yourself a favour and not both trying to add your font to the font family, replace via regular expression quickbases first option by regexp the various normal, italic, bold references with your choice of font. 
- you can do literally anything, just try to be as efficient as possible.
C) Once you have your regular expressions built and replacements mapped, create a service worker for your site (check out workbox by google - its the simplest implementation i have come across reducing your coding to the conditions alone)
D) Route the CSS file names via regular expression, etag headers are used by QB on cloudflare along with some other markers so generally these are cached automatically and set to 30 day retention. What we do here is use a proxy, if you dont have your own check out CORS anywhere, simple to setup, we will call the URL passing credentials include to the css resource, this will bypass origin control header issues and allow you to return the body, use your established regular expressions to make nessiary changes and then pass it as the response. You will ensure to retain the etag and other headers that come with the original file including content length ;) this will trick the browser into caching per the cache policy. If you have trouble you can always force caching in local storage/indexDB.

Note: This method will ensure that unless quick-base renames items outside of what you can reasonably cover via regular expression you will get a fully customised CSS - colours, font, anything you want really. 
- do yourself a favor and strip out any code from JS files you dont want and replace functions with your own, you can even replace the table generator with tabulator which uses a virtual dom that gives you live updates without refreshing, check out the library for more info but you will see you have full control on everything (better than the one Quickbase is working on and talked about in there August release). 
- Insert your code earlier in the propagation cycle, use chrome dev tools and lighthouse along with available web resources to calculate the best point resources should be loaded to improve the loading time. I have my sites loading just as quick but completely customised.
- Quickbase uses React, there are other-ways of doing what you are asking, the best way of course is Quickbase providing customers a method of downloading the react theme template (you can do this yourself using the React Dev tool in Chrome) and a facility to upload the theme in place of their default.


Below is an example of a service worker for my main page, i dont do it this way in production but an example none the less (Cant fish for you, just giving you some pointers on fishing yourself)



self.addEventListener("fetch", event => {

  if (event.request.mode === "navigate" && event.request.method !== "POST") {

    var navTesturl = new URL(event.request.url);

    function callmeMaybe(){
      return new Request(navTesturl, {
        method: "GET",
        credentials: "include",
        destination: "document",
        mode: "same-origin",
        cache: "no-cache"
         })
      };

  if (navTesturl.href.includes("yourrealm.quickbase.com") && navTesturl.href.includes("=return") !== true   && navTesturl.href.includes("redirect=") !== true && /(DBtable\?a=dbpage&pagename=(?:serviceworker|importworker|DevServiceWorker)\.js)/.test(navTesturl.href) !== true && /(tableid\?a=dbpage&pageID=(?:150))/.test(navTesturl.href) !== true) {
  //Iterate through condition checks until you know which page and what conditions the worker will act upon.  
    if (navTesturl.href.includes("db/main")) {
      
      if (/(\/db\/main)/.test(navTesturl.pathname) && event.request.redirect == "manual") {

      event.respondWith(fetch(callmeMaybe()).then(response => {

      return response.text().then(body => {
      // Main Page Body Response literal block starts here   
      
      var oldColBarg = RegExp(/(var gCustomBrandColor = "";\n....<\/script>)/);
      var newColBarg = 'var gCustomBrandColor = "#ccccccc";
      </script>
      <style> 
      #customBrandBar,
      #customBrandBar .CustomBrandLink,
      #navTop > #navTopAppBar,
      #navBars .BrandBarSpacer,
      #navBars #backToTop {background-color: rgba(0, 0, 0, .65)!important;
      #customBrandBar .CustomBrandText,
      #customBrandBar .CustomBrandLink{color: white !important}; 
      </style>'


      var oldIco = RegExp(/(<link rel="icon" href="\/favicon\.ico" \/>\n<link rel="shortcut icon" href="\/favicon\.ico" \/>)/);
      var newIco = '<link rel="icon" href="https://yourrealm.quickbase.com/up/dbtable/g/rx/eg/va/favicon.ico"; />
          <link rel="shortcut icon" href="https://yourrealm.quickbase.com/up/dbtable/g/rx/eg/va/favicon.ico"; />'
      var searLogo = RegExp(/(<a href="\/db\/main\?a=myqb" class="LogoQuickBase FS-H1"><span class="Alt">Quick Base<\/span><\/a>)/);
      var newLogot = '<img class="CustomBrandImage" src="https://yourrealm.quickbase.com/up/tbtable/g/rh/eg/va/Logo.png"; alt="custom brand image" border="0">';
      var noCom = RegExp(/(,\n      'marketplace.initshare',\n      'marketplace.utils')/); 
      var noComRe = "";
      var bodab = body.replace(oldColBarg, newColBarg);
      var bodc = bodab.replace(oldIco, newIco);
      var bodd = bodc.replace(searLogo, newLogot);
      var bode = bodd.replace(noCom, noComRe);
      var markups = '';
      markups += '<script src=${scriptFilecb}></script>';
      var newbody = bode+markups;
      //build and return new body in response
      return new Response(newbody, {
        headers: response.headers
      });
    }
    )}))}