Preface#
Many times, the fonts called by Wordpress by default do not display well. In this case, you can modify the default font of the theme to achieve the desired effect.
The font replacement introduced below is mainly divided into two types. The first type directly calls the system fonts to replace the original default fonts of the theme; the second type uses external font files to achieve font replacement.
First Type: Direct Call#
This method can be achieved by modifying the CSS file. Some themes come with settings for custom CSS styles, and Wordpress also provides this entry (Admin Panel -> Appearance -> Custom CSS). At this point, you can directly enter:
*:not([class*="icon"]):not(i) {
font-family: Segoe UI, "Microsoft Yahei" !important;
}
The above example globally replaces the font with Segoe UI first, and then with Microsoft Yahei. Below are several fonts that are more suitable for reading, for you to replace; just replace Segoe UI and Microsoft YaHei in the code.
SimSun, Microsoft Yahei, STHeiti
Hiragino Sans GB, PingFang SC
Arial, Times New Roman, Droid Sans
Second Type: Private Font Call#
Since it is a private font, it means that it cannot be selected from a public library and needs to be uploaded to a server for loading.
Here you can choose: 1. Upload to the website server 2. Upload to Github (recommended) 3. Upload to private cloud storage for calling
Before this, you need to do a preparatory work. Font files usually only have one format, and to meet the needs of different browsers, they need to be expanded into five formats: .ttf .eot .woff .woff2 .svg
You can find online conversion tools by searching, for example: Online Font Converter
1. Upload to Website Server#
This method carries risks. Chinese font libraries are usually very large; for example, the currently used Source Han Sans has a ttf file of over 8M. Coupled with the generally low bandwidth of domestic servers, it greatly increases the website loading time.
Upload all five prepared font formats to a folder on the website, for example, in the /fonts folder, and name them uniformly, such as siyuan.ttf, siyuan.svg, etc. Enter the following code in the custom CSS styles:
@font-face {
font-family: 'Any name that needs to correspond with the one below';
src: url('../fonts/yourfont.eot');
src:
url('../fonts/yourfont.eot') format('embedded-opentype'),
url('../fonts/yourfont.woff2') format('woff2'),
url('../fonts/yourfont.woff') format('woff'),
url('../fonts/yourfont.ttf') format('truetype'),
url('../fonts/yourfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "Corresponding name above" !important;
}
This method is not highly recommended; it is better to use the cloud storage hosting below.
2. Upload to Github and Use Free jsDelivr CDN Acceleration#
jsDelivr is very easy to use, and I won't elaborate on how to use Github. The general method is to upload your font files to your own repository on Github and then use the acceleration service provided by jsDelivr to call them, which is convenient, easy to use, and free.
The jsDelivr call format is https://cdn.jsdelivr.net/gh/GithubUsername/RepositoryName/SpecificPath
SVG files often exceed 20M. Friends in the comments remind that jsDelivr will report an error if the called file exceeds 20M. You can use other methods to load SVG, but leaving it above is not a problem; it basically does not affect normal use.
Here are some font calling links (hosted on Github, using jsDelivr acceleration service)
AdobeCleanHanSC#
@font-face {
font-family: 'AdobeCleanHanSC';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AdobeCleanHanSC" !important;
}
Source Han Sans#
@font-face {
font-family: 'siyuan';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "siyuan" !important;
}
Awan#
@font-face {
font-family: 'AWan';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/Awan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AWan" !important;
}
Alibaba PuHuiTi 3.0#
@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype'),
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AlibabaPuHuiTi" !important;
}
3. Upload to Cloud Storage for Calling#
When storing font files on a personal server, the server needs to load web pages, images, etc., while waiting for the fonts to load. However, using cloud storage can largely solve the problem of slow website loading.
There are many options for cloud services. If your website has not enabled HTTPS, you can use free Qiniu cloud storage. If HTTPS is enabled, you can apply for free Youpai cloud storage or use paid Alibaba Cloud OSS. Below, I will demonstrate using Alibaba Cloud OSS and Youpai cloud storage as examples.
First, upload the four prepared font file formats to your cloud storage, and set the cloud storage to public read permissions.
Then go to Basic Settings -> Anti-leech, add your domain name, allow empty Refer, and remember to add http(s)://, as shown in the figure below.
Next, set the Cross-Origin Rules, add your domain name, and also need to add http(s)://, **allow Headers to fill in ***.
Now you can go to custom CSS and enter the following code:
@font-face {
font-family: 'Any name that needs to correspond with the one below';
src: url('../fonts/yourfont.eot');
src:
url('../fonts/yourfont.eot') format('embedded-opentype'),
url('../fonts/yourfont.woff2') format('woff2'),
url('../fonts/yourfont.woff') format('woff'),
url('../fonts/yourfont.ttf') format('truetype'),
url('../fonts/yourfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "Corresponding name above" !important;
}
As for Youpai Cloud, after completing the cloud storage configuration, use FTP tools to log in to the cloud storage space and upload, then you can use the file's URL address.
Youpai Cloud's cloud storage connection method can refer to the official documentation: File Management Guide - Youpai Cloud Storage
Summary#
Currently, there is still no comprehensive font library, so the second method should be used more often.
If your server has sufficient bandwidth or has enabled CDN acceleration and is not short on money, placing font files on the website server is definitely not a problem. However, if not, it is still recommended to use a cloud storage to help the website load that large font library.
P.S. There is a program called Font Spider that can reduce the size of website fonts, but it didn't work when I tried it. You can also research this direction.
Update: Font Spider only supports static HTML compression of font size, so Wordpress cannot use it directly.