Font Rendering (Customized)
Elevate your web font rendering without MacType. This script provides deep optimization for browser font rendering, giving web text a premium, high-definition look. While "Microsoft YaHei" is the default, the script is fully customizable to suit your aesthetic preferences.
Designed specifically for modern browsers, this tool offers a comprehensive suite of features: Font Rewriting, Smoothing (Anti-aliasing), Scaling, Text Stroke, Shadow Effects, Element Filtering, and Custom Monospace Fonts. It supports both Global Rendering and Per-Site Configuration. You can quickly access the settings via the script manager icon or dedicated hotkeys.
The script is highly compatible with major browsers (Chrome, Edge, Firefox) and popular script managers like Tampermonkey, Violentmonkey, and Greasemonkey.
Tip
Most major websites are automatically optimized with "Best Practice" parameters, fixing common layout and font issues out of the box.
Pulls predefined site rendering rules to automatically fix styling errors in most popular sites. (Chinese)
Note
If you are using Tampermonkey, Violentmonkey, or Scriptcat, we recommend enabling the "Accelerate Script Loading" (or similar "Inject at document-start") option to prevent the "Flash of Unstyled Text" (FOUT) during page loads.
Attention: Solution to the problem of secondary rendering of the page caused by delayed loading of scripts (Chinese)
- How to correctly set font rendering parameters for different monitors and browsers (Chinese)
- How to download and use more Chinese and English fonts elegantly and correctly? (Chinese)
- Share: About how to set English fonts and Chinese fonts separately (Chinese)
- Share some of the Chinese fonts in the font list, take them for yourself! (Chinese)
- Sharing settings about individual website style error corrections (Chinese)
- Share: Customization and implementation of "monospaced font" in code blocks (Chinese)
The rendering is for reference only, the image size is 1.23M, please be patient ......
- Github Gist
- Script@Github
- Script@GreasyFork
- Script@OpenuserJs (WARNING: The name of this installation source script does not match the other sources, do not duplicate the installation!)
- Scripts@Scriptcat (This installation source is dedicated to Scriptcat script manager, other script managers should be installed from other sources.)
Script debugging log (browser press F12 to open the console console screen to see the following information)
The program automatically activates the error feedback function if a major exception or error occurs during the running of the script.
The adaptive scroll bar in the script setting interface will automatically appear when the browser cannot fully display the current page.
To ensure accurate local font detection, the menu uses a delayed loading mechanism (triggered after fonts are loaded or a timeout occurs).
The Script menu item has a new configuration item for keyboard shortcuts (function keys + letters) 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 |
Note: A short cooldown exists between hotkey presses to prevent accidental triggers.
To preview the complete Font Rendering Settings interface, you can view the usage help for all features.
If you need to reset the font rewrite rules, please visit here for instructions.
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 hot replacement function. If you encounter this kind of problem, 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 cause the saved data to be cleared.
If you need to reset the corrected data rules for site scaling, please visit here for instructions.
Fix a bug in Blink browser of Version 96.0 or above in rendering the stroke attached to the bold style. Enabled by default, please disable it if lagging problem occurs.
Fixed a rendering error in Blink browser version 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 correction function based on the actual display effect of your local monitor. This option is turned off by default (closed with the bold correction). If the style is abnormal, please turn it off separately.
- This function is turned off by default and only needs to be turned on when the website processing style is abnormal or a program conflict occurs.
- Note: For daily use, please do not turn on delayed loading if there is no abnormal situation, which may cause page rendering blocking or delayed rendering in some sites.
Preview button [Usage Guidelines]
Save button [Operation Preview]
- If you need to add a new custom font, use the Custom Font Add feature to add the font into the font library.
- The detection of fonts in the script is based on 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 library, but it is recommended that you provide the Postscript Name of the font if possible.
By determining whether the fonts listed in the built-in font library have been installed on your system, if they have been installed they are shown in the list, the font table is shown below:
Enable customized fonts [Selection of personalized fonts and how to use custom fonts]
-
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.
Enable custom monospaced fonts
You can add custom monospaced fonts through this function, please read the instructions of 9.1 Adding custom monospaced fonts carefully.
[View instructions for data reset]
[View backup and restore instructions]
[View instructions for saving data]
Management of personalized data that can be set up for independent websites
Management of website personalized data lists [Function introduction]
The following is an example of resuming rendering under pan-domain name rules and editing the exclusion list. [Instructions]
As shown in the 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!
Select your preferred primary font for the web. The list only displays fonts installed on your system that exist in the script's predefined table. If you want to use fonts such as Pingfang, Siyuan, Hongmeng, etc., you must first install the fonts and then configure and use them. [As shown in the picture]
- The Microsoft Yahei font is used by default for the first time. If the font is not reselected later, the font that was saved correctly last time will be automatically used.
- 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 you select multiple fonts, the first font will be rendered first, so it is better to select only one favorite than multiple selections.
- If font rewriting is disabled, font substitution will also be automatically disabled and the web page fonts will use the "site default" font settings.
- Whenever a new font is installed on your computer, you will need to rebuild the font cache in Advanced Feature Settings for the new font to take effect immediately.
Add your own new fonts to the 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 included in half-angle double quotes (");
- Chinese font names support Chinese, Japanese, Korean, and English, as well as numbers, half-width minus (-), half-width underscore (_), half-width space ( ), and @;
- English font names support English, numbers and half-width minus signs (-), half-width underscores (_), half-width spaces ( ), @;
@can only appear before the font name, indicating vertical typesetting of text;- "ps:" is the PostScript name of the font, it is optional to fill in, in order to make the new font effective globally, please provide the correct PostScript name;
- If there is no Chinese font name, you can use English or other language font names instead;
- If there is no English font name, you can use Pinyin Quanpin or other English forms instead, but the global uniqueness of the English font name must be ensured;
- How to download and use more Chinese and English fonts elegantly and correctly? (Chinese)
- Initialize the custom font list by clearing all data and saving;
- If there is a format error in the added font, it will be automatically filtered out by the program;
- The added duplicate fonts will be automatically ignored when merging the font librery;
- 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 long font detection time;
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 custom fonts. (i.e. use the website’s default font settings)
The font smoothing option controls the edge smoothness of fonts on the page.
- ON: Softens edges for a more natural, "Mac-like" look.
- OFF: Sharper edges. (Note: On Windows 10, turning this off may cause fonts to appear slightly "blurry" or thin depending on the display).
Font scaling controls the proportional scaling of page fonts to solve the problem that some fonts are normally displayed too small.
- The range of font scaling is 0.800~2.500, and setting it to 1.000 means turn off font scaling.
- Viewport Fix: 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.
- Attention: Due to the limitation of script scaling in GECKO kernel <126, it will cause many irreparable problems. It is recommended to use this function with caution.
The font stroke makes the font achieve the effect of external stroke, and the font will be displayed with greater word weight. The font stroke color is taken from the original font color itself. Different monitors require you to manually adjust to suit your parameters.
- The range of the font stroke is 0.000~1.000, and setting it to 0 means that the font stroke is turned off.
- Bold Fix: If you notice page lag, lockups, or high CPU usage on some sites, try disabling this feature.
Font 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.
- The range of the font shadow is 0.00 to 4.00, and a setting of 0 means that the font shadow is turned off.
- Render Canvas (experimental): It is a function switch for font rendering in the Canvas element. If you find that the text of the Canvas canvas is garbled, please uncheck this option and save it as site-exclusive data.
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 that was 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:
currentcoloror#FFFFFFor#ffforrgb(255,255,255)orrgba(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.
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.
The default is read-only, double-clicking the text field unlocks 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 selectorthat 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.
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.
- The code to filter HTML tags containing nav in all styles of the page is
[class*="nav"] - The code to filter the DIV tags with page ID here 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.
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 the monospaced font that you need to re-render certain elements in individual sites.
- Fill in each line with the site root domain and element selection rules for a fixed-width font application.
- The format is as follows: @sitedomain1|sitedomain2##element selector 1, element selector 2,…
@github.com##[class~='blob-code'] * @github.dev##.example,#abc,div:not(.test) @github.io|github.cc###test:not([class*='test'])Add custom monospaced font
- First, install the monospaced font you want to use on your computer system;
- Then fill in the monospaced font names in the order you want them rendered;
- 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 have not added any custom isometric fonts, the program-defined set of isometric fonts is used by default.
Note: If you need to use a custom monospaced font, please be careful to delete the related key code in the text field of "Exclude HTML tags": pre,pre *,code,code *
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]
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.
Preview button used to preview the rendering effect before saving the data, you can adjust the parameters at any time until you are satisfied and then save it, you can preview the rendering effect in real time without refreshing the page in this process. This function is turned off by default, you need to turn it on in the advanced function settings. [As shown in the picture]
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 value for the total amount of personalized data is 100, too much personalized data will affect the efficiency of script execution, which in turn will affect the normal access to the web page. If your computer performance is strong, you can modify the maximum value through the advanced function settings.
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.
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 ofgoogle.com, but does not includegoogle.com; - It should be noted that:
*.google.comincludesa.google.com,wvw.google.com, but does not includea.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.
Click the rotating question mark icon at the top of the settings panel for instant help. For bugs or feature requests, please open an Issues or join the Discussions on GitHub.