WordPress Global Font Changing Guide

Preface

Often, 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 is to directly call the system font to replace the original theme's default font; the second is to use an external font file to achieve font replacement.

First Method: 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 entry (Backend Management -> Appearance -> Custom CSS). At this time, you can directly fill in:

The above example is to globally prioritize replacing the font with Segio UI, and secondly with Microsoft YaHei. Below are a few fonts more suitable for reading for everyone to replace, just replace Segio UI and Microsoft YaHei in the code.

SimSun, Microsoft YaHei ("Microsoft Yahei"), STHeiti Hiragino Sans GB, PingFang SC Arial, Times New Roman, Droid Sans

Second Method: Private Font Call

Since it is a private font, it means it cannot be selected from public libraries 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 preparation work. Font files usually have only one format, and to meet the needs of different browsers, it needs to be expanded into five formats, which are .ttf .eot .woff .woff2 .svg

You can find online conversion tools by searching, for example: Online Font Conversion

1. Upload to Website Server

This method has risks. Chinese font libraries are usually very large. For example, the Source Han Sans currently in use, a single ttf file is 8M+, coupled with the generally small bandwidth of domestic servers, resulting in a greatly extended website loading time.

Upload all the five font formats prepared earlier to a folder on the website, for example, put them in the /fonts folder, and name them uniformly, such as siyuan.ttf, siyuan.svg, etc. Enter the following code in the custom CSS style:

This method is not highly recommended. It is still recommended to use the cloud storage hosting below.

2. Upload to Github Using Free jsDelivr CDN Acceleration

I won't say much about how easy to use jsDelivr is, and I won't say much about how to use Github here. The general method is to upload your font files to your own Github repository, and then use the acceleration service provided by jsDelivr to call them, which is convenient, easy to use, and most importantly, free.

jsDelivr call format https://cdn.jsdelivr.net/gh/Github Username/Repository Name/Specific Path

Most svg files will exceed 20M. A friend in the comment section reminded that jsDelivr calling files exceeding 20M will report an error. You can use other ways to load svg, but leaving it up there is not a problem and basically does not affect normal use.

Attached are the call links for several fonts (hosted on Github, using jsDelivr acceleration service)

AdobeCleanHanSC

Source Han Sans

Tsukushi A Maru

Alibaba PuHuiTi 3.0

3. Upload to Cloud Storage for Calling

If you store font files on a personal server, the server needs to load web pages, images, etc., while waiting to load fonts, but using cloud storage to call can largely solve the problem of slow website loading.

There are many choices for cloud services. If your website has not enabled HTTPS yet, you can use free Qiniu Cloud Storage. If HTTPS is enabled, you can apply to use free Upyun Cloud Storage or paid Alibaba Cloud OSS. Below is a demonstration using Alibaba Cloud OSS and Upyun Cloud Storage as examples.

First, upload the four formats of font files you prepared earlier to your cloud storage, and the cloud storage needs to be set to Public Read permission.

Then enter Basic Settings -> Anti-leech, add your domain name into it, allow empty Refer, remember to add http(s)://, as shown in the figure below.

Next, set the Cross-origin rules, add your domain name into it, also need to add http(s)://, fill in * at Allow Headers

Next, you can go to custom CSS and fill in the following code:

As for Upyun, after the cloud storage configuration is completed, use an FTP tool to log in to the cloud storage space and upload, then you can use the file's URL address to use it.

For the cloud storage connection method of Upyun, please refer to the official document: File Management Guide - Upyun Cloud Storage

Summary

Since there is no very comprehensive font library yet, the second method should be used more often.

If your server bandwidth is large enough, or you have CDN acceleration enabled and are not short of money, putting the font files on the website server is definitely no problem, but if not, it is still recommended to use a cloud storage to help the website load that huge font library.

P.S. There is a program called Font-spider, which can reduce the size of website fonts, but I tried it and didn't succeed, you can also research in this direction.

Update: Font-spider only supports static HTML to compress font size, so WordPress cannot use it directly.