Preface#
Many times, the default font used by WordPress does not display well. In such cases, you can modify the default font of the theme to achieve the desired effect.
The following methods for changing fonts can be divided into two types. The first type is to directly call the system's fonts to replace the default fonts of the theme. The second type is to use external font files to replace the fonts.
First Type: Direct Call#
This method can be achieved by modifying the CSS file. Some themes come with custom CSS style settings, and WordPress also provides this option (Admin Panel -> Appearance -> Customize CSS). You can directly enter the following code:
*:not([class*="icon"]):not(i) {
font-family: Segoe UI, "Microsoft Yahei" !important;
}
The example above replaces the font globally with Segoe UI as the priority, followed by Microsoft YaHei. Here are a few fonts that are suitable for reading, which you can replace by modifying the code with Segoe UI and Microsoft YaHei.
SimSun (Song Typeface), Microsoft Yahei, STHeiti (STHeiti Light), 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.
You can choose to: 1. Upload to the website server 2. Upload to Github (recommended) 3. Upload to private cloud storage for calling
Before that, you need to do some preparation work. Font files usually have only one format, but to meet the needs of different browsers, they need to be expanded into five formats: .ttf .eot .woff .woff2 .svg
You can search for online conversion tools, such as: Online Font Converter
1. Upload to Website Server#
This method has risks. Chinese font libraries usually have large file sizes. For example, the current font being used, Source Han Sans, has a ttf file size of 8M+. In addition, most domestic servers have small bandwidth, which leads to significantly longer website loading times.
Upload all the previously prepared font files in the four formats to a folder on the website, such as the /fonts folder, and give them unified names, such as siyuan.ttf, siyuan.svg, etc. Enter the following code in the custom CSS style:
@font-face {
font-family: 'Any name, 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 from above" !important;
}
This method is not highly recommended. It is suggested to use the cloud storage hosting method below.
2. Upload to Github and use the free jsDelivr CDN for acceleration#
jsDelivr is a great tool, and Github is also widely used. 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 the fonts. It is convenient, easy to use, and most importantly, free.
The format for calling fonts with jsDelivr is: https://cdn.jsdelivr.net/gh/GithubUsername/RepositoryName/SpecificPath
SVG files are usually larger than 20M. Some users in the comments have mentioned that calling SVG files larger than 20M with jsDelivr will result in an error. In that case, you can use other methods to load SVG files, but leaving them on top should not cause any problems and should not affect normal usage.
Here are a few examples of calling fonts (hosted on Github, using jsDelivr for acceleration):
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;
}
AZuki A Maru#
@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;
}
3. Upload to Cloud Storage for Calling#
If you store font files on your personal server, the server needs to load web pages, images, etc., while also waiting for the fonts to load. However, if you use cloud storage for calling, it can greatly solve the problem of slow website loading.
There are many cloud services to choose from. If your website has not enabled HTTPS, you can use the free Qiniu Cloud Storage. If HTTPS is enabled, you can apply to use the free Upyun Cloud Storage or the paid Alibaba Cloud OSS. Below, we will demonstrate using Alibaba Cloud OSS and Upyun Cloud Storage as examples.
First, upload the four formatted font files you prepared earlier to your cloud storage. Make sure to set the cloud storage to public read permission.
Then, go to Basic Settings -> Anti-leech and add your domain name, allowing empty Referers. Remember to include http(s)://, as shown in the image below.
Next, set up Cross-Origin Rules and add your domain name, also including http(s)://. In the Allow Headers field, enter "*".
You can now go to customize the CSS and enter the following code:
@font-face {
font-family: 'Any name, 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 from above" !important;
}
As for Upyun Cloud Storage, after configuring the cloud storage, you can use an FTP tool to log in to the cloud storage space and upload the files. Then, you can use the URL address of the file for calling.
For Upyun Cloud Storage, you can refer to the official documentation for the connection method: File Management Guide - Upyun Cloud Storage
Conclusion#
Since there is currently no comprehensive font library, the second method is more commonly used.
If your server bandwidth is large enough or you have enabled CDN acceleration and have sufficient funds, there should be no problem with hosting the font files on the website server. However, if not, it is recommended to use cloud storage to help with the loading of the large font library.
P.S. There is a program called FontSpider that can reduce the size of website fonts. However, I tried it and it was not successful. You can also explore this direction.
Update: FontSpider only supports compressing font sizes for static HTML, so it cannot be directly used with WordPress.