RuneScape Font Changer For All Website

RuneScape Font.user.js

// ==UserScript==
// @name         RuneScape Font 16px
// @version      1.1
// @author       Dawncore/Louis Hong
// @description  Injects RuneScape fonts and dynamically adjusts text-shadow based on page color
// @icon         https://www.google.com/s2/favicons?sz=64&domain=runescape.com
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  // Inject the CSS with a dynamic variable for text-shadow
  GM_addStyle(`
    :root {
      --text-shadow: 1px 1px 0 #000; /* Default shadow */
    }

    html body,
    html body p,
    html body span,
    html body div,
    html body a,
    html body li,
    html body pre,
    html body code,
    html body kbd,
    html body samp,
    html body .hljs,
    html body .hljs * {
      font-family: "RuneScape Plain 12" !important;
      font-size: 16px !important;
      -webkit-font-smoothing: none !important;
      -moz-osx-font-smoothing: none !important;
      font-smooth: never !important;

      font-style: normal !important;
      text-shadow: var(--text-shadow) !important;
    }

    /* Bold text → Use bold font */
    html body b,
    html body b *,
    html body strong,
    html body strong * {
      font-family: "RuneScape 12" !important;
      font-weight: bold !important;

      font-style: normal !important;
      text-shadow: var(--text-shadow) !important;
    }

    /* Headers → Use bold font */
    html body h1,
    html body h1 *,
    html body h2,
    html body h2 *,
    html body h3,
    html body h3 *,
    html body h4,
    html body h4 *,
    html body h5,
    html body h5 *,
    html body h6,
    html body h6 * {
      font-family: "RuneScape 12" !important;
      font-size: 16px !important;
      font-weight: bold !important;

      font-style: normal !important;
      text-shadow: var(--text-shadow) !important;

    }

    html body sup {
      font-family: "RuneScape Plain 11" !important;
      font-size: 11px !important;

      font-style: normal !important;
      text-shadow: var(--text-shadow) !important;
    }

    html body em,
    html body i {
      font-family: "RuneScape Plain 11" !important;
      font-size: 16px !important;

      font-style: normal !important;
      text-shadow: var(--text-shadow) !important;
    }
  `);

  function adjustTextShadow() {
    const allEls = document.querySelectorAll("body *");
    let blackTextCount = 0;
    let totalTextCount = 0;

    allEls.forEach(el => {
      const color = window.getComputedStyle(el).color;
      if (!color) return;
      totalTextCount++;

      if (color === "rgb(0, 0, 0)") {
        blackTextCount++;
      }
    });

    // If 80%+ of text is black, disable text-shadow
    if (blackTextCount / totalTextCount >= 0.3) {
      document.documentElement.style.setProperty("--text-shadow", "none");
    }

    console.log("Black text percentile: " + blackTextCount / totalTextCount);

  }

  adjustTextShadow();
})();

The RuneScape fonts from the following repos must be installed.

https://github.com/RuneStar/fonts

https://github.com/runelite/runelite/tree/master/runelite-client/src/main/resources/net/runelite/client/ui

(Optional) Disable Windows Text Antialiasing

What anti-aliasing would look like

With no anti-aliasing, the font size used must be a multiple of 16

This stylesheet may break website functionality/layout

If a particular website is broken, exclude the usage of stylesheet for that domain.

TamperMonkey (Extension for userscripts)

https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo