Introducing External Fonts in WeChat Mini Programs

Recently, when working on the RPshare mini program, the design draft used the Usual Design Title Black font. When actually building it, I used the method of directly importing the compressed font as base64 code. Personally, I prefer this method because it is simpler and more convenient than adding files. Coincidentally, someone recently asked me about the method of compressing and importing Chinese fonts. Although I have written about it in my blog before, the website for compressing fonts mentioned in it is no longer available, and the steps are also cumbersome and not elegant enough. Therefore, I wrote this post.

Preparation#

Install Font Spider with nodejs here.
Rename the font file to be compressed as font.ttf.
Create a font.html file.

Install Font Spider#

If you have already installed the nodejs environment, you can directly install it with the following command. If you haven't installed nodejs, please refer to here.

npm install font-spider -g

font.html file#

Create a font.html file. This is a necessary step for Font Spider to compress fonts. The content is as follows. Replace the content inside the div with the text you need. The compressed file will include these texts. Font Spider will automatically remove duplicates, so it doesn't matter if there are duplicates.

<!DOCTYPE html>
<html lang="en">
<style>
    @font-face {
        font-family: font;
        src: url("./font.ttf") format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM文件库图片代码新建代码取分享功能暂未开放!可申请文件分享权限改删更简介:：快速打
</div>
</body>
</html>
<style>
    div{
        font-family: font;
    }
</style>

Start compression#

Place the created font.html file and font.ttf file in the same directory. Right-click on a blank space in the folder, select Open PowerShell window here, and enter the following command:

font-spider font.html

微信截图_20220717130455.png

If this command appears, it means that the compression was successful. The original font.ttf file in the original folder has been replaced with the compressed font file. The uncompressed original font file is located in the .font-spider folder created by Font Spider. If you are used to using files directly, you can use them directly on web pages. However, since WeChat mini programs do not support using font files directly, font files that require network links or base64 direct import are needed. I need to convert the font to base64 code.

Convert font to base64#

I personally use this website. Open the Base64 encode option and uncheck the checkboxes for the font file types below (not necessary, checking them will generate these font file types). Since I only need base64, I unchecked them.

微信截图_20220717130940.png

Click Add font to select the font file compressed by Font Spider, then click Convert and Download to download the compressed font package. The style.css file inside it contains the code for importing the compressed font as base64. Next, add it to your CSS file. For mini programs, you can add it to the global CSS file so that this font can be used on all pages~

微信截图_20220717131852.png