Font Rendering (Customized)

Introduction　[ 中文 | English ] 　[ Home ]

Enhance browser’s font rendering without installing MacType. This script offers a high-quality, customizable experience with default ‘Microsoft YaHei’ font. It provides advanced features like font rewriting, smoothing, scaling, stroking, shadowing, and filtering of special style elements. It supports global and personalized rendering, compatible with most mainstream browsers, script managers, and common userscripts & browser extensions. Configure parameters via the script manager icon or shortcuts.

🧶Useful Links:

Comparison of rendering effects

Exmaple_en The renderings are for reference only, the image size is 500KB, please wait patiently...

Instructions for use V6.6

How to install the script

Github Gist
Script@Github
Script@GreasyFork
Script@OpenuserJs [FOR NAMESPACE] (If you install from other source, Please don't install this again.)

Script logging (picture)

Script debugging log (press F12 on the browser to open the console interface to see the following information)

console_en

Script error feedback (picture)

If a major exception or error occurs during the running of the script, the program will automatically activate the error feedback function.

errorReport_en

Adaptive scroll bar (picture)

The adaptive scroll bar in the script setting interface will automatically appear when the browser cannot fully display the current page.

scrollingbar_en

Script menu (picture)

In order to ensure the accuracy of local font detection, the script uses delayed loading to open the menu when manually opening the script menu. (i.e. triggered when all third-party fonts are loaded or within the timeout period)

Extended script menu

menus_en menus2_en

The script menu item has a new keyboard shortcut (function key + letter) configuration item to operate the script menu.

Scripting Shortcuts	Windows	Linux/Unix	MacOS
Font Rendering Settings	`Alt+P`	`Alt+P`	`Option+P`
Exclude/Re-rendering	`Alt+X`	`Alt+X`	`Option+X`
Advanced Core Settings	`Alt+G`	`Alt+G`	`Option+G`
Feedback to Author	`Alt+T`	`Alt+T`	`Option+T`

Prevent multiple triggers, keyboard shortcuts have different time intervals required between each click, multiple quick triggers of shortcuts will be ignored.

Advanced Core Settings

VIP_en VIP2_en

Font Rendering Settings Interface

To preview the complete Font Rendering Settings screen, you can view the usage help for all features.

settingUI_en

Customized font rewrite data

If you need to reset the font rewrite rules, please visit here for instructions.

fontRewrite_en

fontRewriteZone_en

Firefox Input Styling Fix

If you are using the Firefox browser, due to its style compatibility issues, some <INPUT> tags on some sites will be exploded when using the font hotshift function. If you encounter this issue, please turn on the <INPUT> tag style correction function here. Since this data is stored in the browser's localStorage, clearing the browser cookies will invalidate the saved data.

fontRewriteZone_en

Customized site scaling settings data

If you need to reset the corrected data rules for site scaling, please visit here for instructions.

fontScaleSet_en

fontScaleSetZone_en

Fix Bold

Fixed the rendering error of the stroke attached to the bold style in Blink browser of Ver 96.0 or above. ON by default, please disable it if lagging problem occurs.

Add Shadow Fix

fixshadow_en

Fixed rendering issues in Blink browser version Ver 123.0 and above (default parameters) that adds shadow effects to bold styles. This rendering problem will cause rendering abnormalities of varying severity depending on the custom font. Please determine whether to enable this option based on the actual display effect of your local monitor. This option is OFF by default (turn off with the bold correction). If the style is abnormal, please turn it off separately.

Lazyload

lazyload

This feature is turned off by default and only needs to be turned on if there is an anomaly in the site's processing style or if there is a program conflict.
Note: For daily use, if there is no abnormal situation, please do not turn on lazy loading, which may cause page rendering blocking or delayed rendering in some sites.

Settings screen (save and preview)

Preview button [Usage Guidelines]

preview_en

Save button [Operation Preview]

save_en

Built-in font library

If you need to add a new custom font, use the Custom Font Add Function to add the font into the font table.
The script's fonts are detected by English font names, supplemented by Chinese font names, but both English and Chinese font names must be provided.
The Postscript Name is optional in the font list, but it is recommended that you provide the Postscript Name of the font if possible.

insertFonts

Custom font selection

By judging whether the fonts listed in the established font table have been installed in your system, if they are installed, they will be displayed in the list. The font table is as shown below:

fontSelect_en

Custom font library

Turn on custom fonts [Selection of personalized fonts and how to use custom fonts]

customfont_en

You can use this function to add the new fonts you need to the font table. To add them according to the given preset format, please read the instructions of [1.1 Adding custom fonts] carefully.
These lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature.
Represents a space-separated tuple consisting of a tag name and an optional value.
- The tag name is always a of four ASCII characters. If the tag name has more or fewer characters or if it contains characters outside the U+20 – U+7E code point range, the descriptor is invalid.
- The optional value can be a positive integer or the keyword on or off. The keywords on and off are synonyms for the values 1 and 0, respectively. If no value is set, the default is 1. For non-boolean OpenType features (e.g., stylistic alternates), the value implies a particular glyph to be selected; for boolean features, the value turns the feature on or off.

customfontlibrary_en

Custom monospaced font

Enable custom monospaced fonts

customMonospacedFont_en

You can use this function to add a custom monospaced font to set the monospaced font you need. Please read carefully [9.1 Adding a custom monospaced font].

customMonospacedFontZone_en

Data reset

[View instructions for data reset]

reset_en

Backup and restore

[View backup and restore instructions]

backup_en

Data storage

[View instructions for saving data]

saveData_en

Management of personalized data that can be set up for independent websites

curSavadate_en

Management of website personalized data list [Function introduction]

personalsetting_en

Introduction to exclude rendering

Disable font rendering for a domain name

exclude_en

Restore font rendering for a domain name

include_en

Customize sites that disable font rendering

The following is an example of resuming rendering under pan-domain name rules and editing the exclusion list [Instructions]

includePan_en manageExclude_en

Description of font rendering settings

As shown in Script Settings Interface: When reading the introduction, you can open the "Font Rendering Settings" interface in the script menu, which will give you a better experience than reading the instructions!

1. Personalized font selection

Choose the font you want to appear on all web pages. The Chinese fonts listed in the list are already installed on your computer and are in the code font table. You must install the fonts first and then configure and use them. [As shown in the picture]

Use the default Microsoft Yahei font for the first time. If you do not reselect the font later, it will automatically use the last correctly saved font.
Enter keywords in the input box to search for fonts in the font table. Chinese and English font names are supported.
The selection of fonts should be as concise as possible. Even if multiple fonts are selected, the first font will be rendered first, so it is better to select only one favorite than multiple selections.
If the font rewriting function is turned off, the font replacement function will also be automatically disabled, and the web font will use the "website default" font setting.
Whenever a new font is installed on your computer, you need to rebuild the font list cache in the advanced feature settings for the new font to take effect immediately.

Adding custom fonts

Add your own new fonts to the custom font library.

How to enable the adding function of custom fonts? Click here to view

Add the format as { "ch":"Chinese Fontname 1", "en":"EN Fontname 1", "ps":"PostScript Name" }

One set of font data per line, Note that all parameters need to be enclosed in half-width double quotes (");

Chinese font names support Chinese, Japanese, Korean, English, as well as numbers, half-width minus signs (-), half-width underscores (_), half-width spaces ( ), and @;

English font names support English, numbers and half-width minus signs (-), half-width underscores (_), half-width spaces ( ), and @;

@ can only appear before the font name, indicating vertical typesetting of text;

if no Chinese font name, please use English or another language font name instead;

"ps:" is the PostScript name of the font, which is optional. To make the new font take effect globally, please provide the correct PostScript name.

How to download and use more Chinese and English fonts correctly?

Clear all data and save to initialize the custom font list;

If there is a format error in the added font format, it will be automatically filtered out by the program; *Added duplicate fonts will be automatically ignored when merging font tables;

The saving operation of custom fonts will automatically trigger the reconstruction of the global cache of the font list, no additional operations are required;

It is not recommended to add too many custom fonts to avoid affecting page response due to too long font detection time;

2. Font rewriting

By rewriting other fonts on the page to the font of your choice and re-rendering, turning [ON] on will change all web fonts and replace some commonly used fonts with the font of your choice.

Note: Turning off font rewriting will automatically disable the selection of personalized fonts. (i.e. use the website’s default font settings)

3. Font smoothing

The font smoothing option controls the edge smoothness of fonts on the page. Turning [ON] on will make the fonts more natural and rounded. Turning off the [OFF] state will make the edges of the fonts sharper, and the fonts under Win10 will be blurred due to system rendering problems.

4. Font scaling (experimental)

Font scaling controls the proportional scaling of page fonts to solve the problem that some fonts are normally displayed too small. Attention users of Firefox browser: Due to the GECKO kernel's limitation of script scaling, it will cause many irreparable problems. It is recommended to use this function with caution.

Fix VPU: If you find that some sites have overall style errors (at this time, you will find an error when you check the console), please try to turn off this feature.

Note: The range of font scaling is 0.800~1.500. Setting it to 1.000 means turning off font scaling.

5. Font stroke

Font stroke allows the font to achieve the effect of an external stroke. The font will be displayed with a larger font weight. The font stroke color is taken from the original font color itself. Different monitors require you to manually adjust the parameters that suit you.

Fix Bold: If you find that some sites experience page freezes, freezes, or high CPU usage, please try turning off this feature.

Note: The range of font stroke is 0.000~1.000. Setting it to 0 means turning off font stroke.

6. Font shadow

Shadows make the fonts on the page appear clearer, and the new version has fixed the problem of blurry fonts caused by multiple shadows. Adjust the shadow size yourself according to your needs

Canvas (experimental): It's a function switch for font rendering of Canvas, if you find the text in Canvas is garbled, please uncheck this option and save it as website data.

Note: The range of font shadow is 0.00~4.00. Setting it to 0 means turning off font shadow.

7. Font shadow color

The font shadow color generally uses light gray or dark gray as the base color, which will make the fonts on the web page appear more clearly. The input box supports the following color formats. After you input, the program automatically converts it to HEXA format for display, but the color value remains consistent with what you filled in.

Supported formats for font shadow color(No matter what format, the color syntax is strictly followed. If you enter an error, the shadow color will automatically revert to the color just displayed correctly.)

HEX: #CECECE, #BA7, #f9abc3, #f3a (Please be consistent in case)
HEXA: #aabbccdd, #BABABA0D (Please be consistent in case)
RGB: rgb(124,124,124)
RGBA: rgba(124,124,124,0.3)
currentcolor: currentcolor or #FFFFFF or #fff or rgb(255,255,255) or rgba(255,255,255,1)

Note: By default, the code expresses all color codes defined as pure white as currentcolor, which is the current font color.

8. Rendered Elements

What is filled in here is the web page elements that need to be rendered. The default is the page elements that need to be rendered after excluding the special CSS styles commonly used by most websites. Read-only by default, double-click the text field to unlock editing. If you need to add a new style, please continue to add it after the code. The filling format is as follows, following CSS syntax:

:not(.fa) _Note: .fa is the class value of the tag in the web page code. _
:not([class*="fa"]) _Note: The web page code contains the class value of the fa character. _
Exclude the appended :not(style selector) for rendering, and add the appended , new style selector that needs to be rendered. Please learn more CSS syntax knowledge by yourself.

Note: This area is an important parameter. If you are not familiar with CSS, please do not modify the code easily to avoid rendering failure. If it fails, please initialize the data through the reset button.

9. Exclude HTML Labels

The HTML tags filled in here will not be rendered with font stroke or font shadow effects. If you need to continue adding tags to be excluded, please use half-width commas (,) to separate them. The format is as follows, following CSS syntax.

To filter the HTML tags containing nav in all styles of the page, the code is [class*="nav"]
To filter the DIV tag with the page ID here, the code is div[id="here"]

Note: Filling in this area requires CSS knowledge. Any part of the web page that you do not want to be rendered can be complex filtered through tags, styles, or tags + attributes. If the filtering causes confusion, please reset it.

Adding custom monospaced font

Double-click the 🔔 on the right side of "Exclude HTML Labels" to open the tool for adding custom monospaced fonts.
Add custom monospaced font root domain and element selector　[Add site rules for custom monospaced font]

This text field defines whether you need certain elements in individual sites to re-render monospaced fonts.

Fill in each line with the site root domain and element selection rules for a fixed-width font application.

Format such as: @site root domain##element selector 1, element selector 2,...
@github.com##[class~='blob-code'] *
@github.dev##.example,#abc,div:not(.test)
@github.io###test:not([class*='test'])
Add custom monospaced font

First, install the monospaced font you want to use in your computer system;

Then fill in the monospace font name in the rendering order you need;

Use single quotes to include font names, and separate font names with commas. For example: 'Source Code Pro','Mono','Monaco' [As shown in the picture]

Note: If you do not add any custom monospaced fonts, the program-defined collection of monospaced fonts is used by default.

Note: If you need to use a custom monospaced font, please be careful to delete the relevant key codes in the text field of "Exclude HTML tags": pre,pre *,code,code *

10. Reset button

Reset button will restore all parameters in the script settings to the initial state of the program. This operation needs to be saved manually. Generally, resetting parameters is only performed when you configure parameters incorrectly and the result is irreversible. Restore button is to restore the currently configured data to the last correctly saved parameter value. This operation will automatically restore the preview. [As shown in the picture]

Note: To manage personalized website settings, please follow the text prompts in the save button.

11.Backup button

Backup button is used to back up local configuration data, enabling cross-browser and cross-device data sharing. The format of the exported backup file is backup.*.sqlitedb, where * = the date and time of the backup and the browser name. The backup is exported and the backup file is automatically downloaded. When you need to restore, first click 🔎[Click here to load *.sqlitedb backup file] to load the local backup file, and then click the restore button to perform the restore operation. [As shown in the picture]

Note: The backup function is enabled by default. If you do not need this function, you can turn it off through advanced function settings.

12. Save button

Save button is used to save configuration data. The new version's save function is divided into global data saving (global default) and data saving of the current website (personalized). Personalized settings take precedence over global settings for rendering, and the management of personalized data for the current website can be directly deleted or overwritten and saved. [All data list] is a list of all your personalized website data, which is used to delete website personalized data that you no longer need. [As shown in the picture]

Note: The maximum total amount of personalized data is 100 items. Excessive personalized data will affect the script execution efficiency and thus affect the normal access of the web page. If your computer has powerful performance, you can modify the maximum value through advanced function settings.

preview button

Preview button is used to preview the font rendering effect before saving the data. You can adjust the parameters to your satisfaction at any time before saving. This process allows you to preview the rendering effect in real time without refreshing the page. This feature is turned off by default and needs to be turned on in the advanced feature settings. [As shown in the picture]

13. 🔔 in the configuration page

The prompts for the corresponding operation are displayed by clicking the mouse. If you don't know how to operate or want to know the function of the operation, please read the content in 🔔 carefully after each major version update.

14. Customize settings for excluded sites

Customized excluded sites support the correct domain name format and pan-domain name format. The following mainly introduces how to use pan-domain names:

The program supports generic domain names starting with *, such as *.google.com, which includes all second-level domain names of google.com, but does not include google.com;
It should be noted that: *.google.com includes a.google.com, wvw.google.com, but does not include a.b.google.com;
It is not recommended to use a generic domain name in general usage scenarios to prevent all subdomain names under the root domain from being excluded.

15. Rotating question mark at the top of the page

Help button, click to open the script usage help page.