WeChat Mini Program Introduces External Fonts

Recently, when working on the mini program RPshare, the design draft used the YouShe title black font. During the actual setup, I used the method of directly importing base64 compressed fonts in pure code. Personally, I prefer this method; it is simpler and more convenient than adding files. Recently, someone asked me about the method of compressing and importing Chinese fonts. Although I had written about it in my blog before, the websites for compressing fonts mentioned there were no longer valid, and the steps were quite cumbersome and not elegant enough, so I wrote this post.

Preparation#

nodejs Install Font Spider

Rename the font file to be compressed as font.ttf

A font.html file

Install Font Spider#

If you have already installed the nodejs environment, you can install it directly with the command below. 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 the font. The content is as follows. Replace the content in the div with the text you need. The compressed file will include this text, and Font Spider will automatically deduplicate, so it's okay 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 File Library Image Code New Code Sharing Function Not Yet Open! You can apply for file sharing permissions to modify and delete more concise: Quick typing
</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 in the blank area of the folder, select Open PowerShell window here, and enter the following command
font-spider font.html
If this command appears, it means the compression was successful. The original font.ttf in the folder has been replaced with the compressed font file, and the uncompressed original font file is in the newly created folder .font-spider. If you prefer to use the file directly, you can use it directly on the webpage. Since WeChat mini programs do not support using font files directly, you need font files with a network link or base64 directly imported. 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 boxes for several font files below (not necessary; if checked, those font files will be generated) because I only need base64, so I unchecked them.

Add font select the font file you compressed with Font Spider, then Convert, Download to download the compressed packaged file. Inside, style.css is the base64 compressed font import code. Next, add it to your css file. In the mini program, you can add it to the global css file, so that all pages can use this font!