Tangut Script Renderer

I have created a program that renders Tangut text on any website online, even if the website usually displays rectangles instead of Tangut script.

I have imaginatively called this program the “Tangut Script Renderer”, or TSR for short.

---

In order to install the TSR program, please follow these steps:

1) Download a userscript extension on your web browser

First, you have to download a browser extension such as Greasemonkey, Tampermonkey, or Violentmonkey. These extensions allow for userscripts, i.e. custom programs that run on the browser on selected webpages. I developed this extension on Violentmonkey specifically. (If you want to run this program on a phone, you will have to download a mobile browser that allows you to install extensions. I use the Kiwi browser for this. Once you’ve downloaded the browser, you will then have to install one of the aforementioned userscript extensions.)

2) Make sure the userscript extension is enabled in your browser

Once the userscript extension is downloaded, make sure it’s activated or enabled. You have to go to your browser’s extensions manager to check this.

In Firefox, you can tell that an extension is enabled if the little toggle button beside it is blue and switched to the right, as shown in the below image:

3) Open the extension’s settings and click on + to add a new script

Open the extension’s settings menu and click on the + icon (see below), then click on “New” to add a new script.

After clicking on the + icon and then the “New” button, your screen should look something like this:

4) Copy-paste the TSR code as a new script in the extension

Select and delete the existing //==UserScript== metadata block (i.e. all the text from lines 1 to 10 seen in the image above), and copy-paste the following code (all the text on the grey background) in its place:

// ==UserScript==
// @name        Tangut-Script-Renderer
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       none
// @version     1.0
// @author      Nick Prior
// @description 2025-07-25, 9:14:23 p.m.
// ==/UserScript==
    // Embed the font through <link> elements
    const preconnectGoogleFonts = document.createElement('link');
    preconnectGoogleFonts.rel = 'preconnect';
    preconnectGoogleFonts.href = 'https://fonts.googleapis.com';

    const preconnectGstatic = document.createElement('link');
    preconnectGstatic.rel = 'preconnect';
    preconnectGstatic.href = 'https://fonts.gstatic.com';
    preconnectGstatic.crossOrigin = 'crossorigin';

    const fontStylesheet = document.createElement('link');
    fontStylesheet.href = 'https://fonts.googleapis.com/css2?family=Noto+Serif+Tangut&display=swap';
    fontStylesheet.rel = 'stylesheet';

    // Embed the font through an @import declaration
    const styleElement = document.createElement('style');
    styleElement.textContent = "@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tangut&display=swap'); font {font-family: 'Noto Serif Tangut' !important;}";

    // Append the link elements to the head
    document.head.appendChild(preconnectGoogleFonts);
    document.head.appendChild(preconnectGstatic);
    document.head.appendChild(fontStylesheet);
    document.head.appendChild(styleElement);

    console.log("Tangut font has been loaded. If it isn't displaying, something on the website must be blocking it.");

3) Save the script and test it out

Then choose to save and close the script in the top right corner:

You may need to click a toggle button beside the script in the extension’s settings in order to activate it. An active script won’t be greyed out, and its toggle button (immediately to the right of the </> icon) will be shifted to the right:

You can read through the relevant extension’s user guide if you run into any difficulty with these steps. Please remember that you can contact me for technical support.

Disclaimer: This program will not run on all websites. For example, DuckDuckGo has content security policies that prevent you from inserting custom styles into the page.

---

How do fonts work in the browser?

When your web browser wants to display a character, it goes through a step-by-step process to determine what font it should use. A single font will only cover certain characters (such as all English letters), and won’t apply to all characters in all languages. So, for example, just because your browser has access to the Arial font, doesn’t mean that you can display Tangut text in Arial. You need a specific font that covers Tangut characters.

The step-by-step process is as follows:

1. If the website specifies a font to use for that character, then your browser uses that font. This is called a “web font”.
2. If the website doesn’t specify a font to use for that character, then your browser falls back to using a default font installed locally on your device. This is called a “system font”. The fonts that come pre-installed on most operating systems cover common scripts like English, but tend not to include fonts for rarer languages like Tangut.
3. If there is neither a web font nor a system font available for this character, then your browser displays some type of fallback character to indicate that this character couldn’t be rendered. As explained on Wikipedia:
   “If an application does not have access to a glyph for a required codepoint in the specified font,^[a] the character should be shown as the font’s .notdef glyph ⟨􏿮⟩.^[3] This often appears as an empty box, ☐ (nicknamed “tofu” based on the shape), a box with an X in it, ☒, a diamond with a question mark, �, or a box with a question mark in it, ⍰.”

The Tangut Script Renderer intervenes by inserting a Tangut web font onto every web page you visit so that Tangut characters can be rendered.

Installing system fonts

Because web fonts only work in browsers, other applications may still fail to render Tangut characters even with TSR installed. To fix that, you would need to install a Tangut font (such as Noto Serif Tangut, which is what TSR uses — click “Get font” and then “Download all”) onto your system, and make it available for applications to use. This process depends on your exact operating system and font settings, so it is something you would have to research on your own. Typically, once you’ve downloaded an .otf or .ttf file containing the font you want to use, you then need to move it into some kind of system-wide fonts folder. You may need to restart your computer afterwards for the font to come into effect. If you install a system font for Tangut, then TSR is no longer needed.