Change the fonts when a window is moved between Hi/Low DPI monitors. Cr DevTools Snippet

pixelizeFonts.js

function _buildFontSwitcher({document, fontFunc, selectors = [], aliases = [], bangImportant = false}) {
  // This is basically a closure around a style tag.

  // build that style tag.
  const el = document.createElement("style");
  document.head.appendChild(el);

  const _buildAlias = (fn, an) => `
      @font-face {
        font-family: ${an};
        src: local("${fn}"); 
      }
  `
  
  const _buildFontProp = (k, v) => `font-${k}: ${v}${bangImportant ? ' !important' : ''};\n`

  const _buildStyle = (font) => `
      ${aliases.map((name) => _buildAlias(font.family, name)).join('\n')}

      ${selectors.join(', ')} {
        ${Object.keys(font).map((k) => _buildFontProp(k, font[k])).join('')}
      }
  `;

  // hack to kill this
  document._killFontStyle = () => {
    el.innerHTML = '';
  }

  return () => {
    // get the current font and mutate the style
    el.innerHTML = _buildStyle(fontFunc());
  }
}

function _loadFonts({document, path, fonts}) {

  // CORS-permit the font server
  ((doc, urlStr) => {
    const urlObj = new URL(urlStr)
    const fontPolicy = doc.createElement("meta");
    fontPolicy.httpEquiv = "Content-Security-Policy";
    fontPolicy.content = `font-src ${urlObj.protocol}//${urlObj.host};`;
    doc.head.insertBefore(fontPolicy, doc.head.firstChild);
  })(document, path);

  _buildStyle = (family, url) => ` 
      @font-face {
        font-family: ${family};
        src: url("${url}") format("woff"); 
      }
  `;

  _buildUrl = (filename) => `${path}/${filename}`;

  // Load the fonts
  ((doc, style) => {
    const loader = doc.createElement("style");
    loader.innerHTML = style;
    doc.head.appendChild(loader);
  })(document, Object.keys(fonts).map((k) => _buildStyle(k, _buildUrl(fonts[k]))).join(''));
}

/*
  CSS Selectors for pre content

    Hterm: 'x-screen x-row' // but not really necessary
    
    DevTools:
      UA style has !important :(

        :host-context(.platform-linux) .monospace,
        :host-context(.platform-linux) .source-code,
        .platform-linux .monospace,
        .platform-linux .source-code {
            font-size: 11px !important;
            font-family: dejavu sans mono, monospace;
        }

      exmple path to console element: 
        body.platform-linux div.vbox ... div.console-view-wrapper div.vbox div.console-view ↵
        div.monospace div.console-group-messages div.console-message-wrapper ↵ 
        div.console-message span.source-code span.console-message-text

      .console-view .monospace .console-message
*/


// main
((window) => {
  const config = {
    FONTS_PATH: 'http://127.0.0.1:8887',
    BITMAP_FILENAME: 'profont_pixelated.woff',
    SMOOTH_FILENAME: 'profont_smooth.woff',
    SMOOTH_FAMILY: 'profont_smooth',
    BITMAP_FAMILY: 'profont_pixelated',
    FAMILY_ALIASES: ['profontwindowsregular', 'profontiix', 'profont', 'profontx', 'ProFontWindows', 'monospace'],
    PRE_ELEMENT_SELECTORS: [
      // These are the elements meant to be 'pre' formatted
        'textarea',
        'pre', 
        'code', 
        'kbd', 
        'listing', 
        'xmp',
      // Fix code mirror
        '.CodeMirror pre span',
        '.CodeMirror div.CodeMirror-linenumber',
        // DevTools
        '.platform-linux .console-view .monospace .console-message',
        '.platform-linux .console-view .monospace .source-code',
        '.platform-linux .console-view .monospace .console-user-command',
        '.platform-linux .console-view ::shadow .source-code',
  ]};

  const pixelRatioSwitcher = (() => (
      window.devicePixelRatio == 1) 
      ? config.BITMAP_FAMILY 
      : config.SMOOTH_FAMILY);

  const alwaysPixelize = () =>  config.BITMAP_FAMILY;

  const fontPropertiesBuilder = () => ({ 
    size: '12px',
    family: pixelRatioSwitcher(),
    style: 'normal'
  })

  const initWindow = (window) => {
    // First run?
    console.log(`installing font switcher in ${window.document.location}`)
    // Load our custom fonts
    try {
      _loadFonts({
        document: window.document,
        path: config.FONTS_PATH,
        fonts: {
          [config.BITMAP_FAMILY]: config.BITMAP_FILENAME,
          [config.SMOOTH_FAMILY]: config.SMOOTH_FILENAME
        }
      });
    } catch (e) {
      console.log(
        `Failed to install fonts in window at:\n${
            window.location
        }\nCORS has probably defeated us...`);
    }

    // Build the switcher
    const switcher = _buildFontSwitcher({
      document: window.document, 
      selectors: config.PRE_ELEMENT_SELECTORS,
      aliases: config.FAMILY_ALIASES,
      fontFunc: fontPropertiesBuilder,
      bangImportant: true
    });

    if(window._switchFonts != undefined) {
      window.document._killFontStyle();
      window.removeEventListener("resize", window._switchFonts, false);
    }

    // Add event handler to re-pick font if doc shows up in a different monitor
    //window.onresize = switcher;
    window.addEventListener("resize", switcher, false);

    // Attach the switcher so we can find it
    window._switchFonts = switcher;
    
    // Update the font!
    window._switchFonts();
  }

  initWindow(window);
  // Set up any iframes
  for(fr of window.$$('iframe')) {
    try {
      initWindow(fr.contentWindow);
    } catch (e) {
      console.log(`Failed to install font switcher in iframe at:\n${fr.src}\nProbably an ad...`);
    }
  }

})(window)