This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Wechat applet font ICONS (.ttf,.woff,woff2) cannot be displayed

Reason: My project referenced external CDN, but the CDN link failed. Replacing another valid CDN link can solve the problem, but it may still fail.

Solutions:

1. Localized deployment of font icon files means downloading corresponding TTF, WOFF and Woff2 files to the local server and replacing the corresponding CDN link address with my own server resource address.

2. Turn font files such as TTF, WOFF and SVG into Base64 and put them in the wechat applet project folder. However, if there are too many ICONS, the Base64 file will be too large, which may exceed the package size limited by wechat applet and lead to the failure of the project online.

The iPhone doesn’t recognize the wOFF font icon and needs to manually convert it to Base64

In addition, when I was testing the project, I found that the ICONS of rich text editor components were sometimes displayed and sometimes not. After debugging for a long time, I did not find any problems. Finally, I changed the iPhone and Android phones for testing and found that the iPhone phones were not compatible with WOFF font ICONS, so I needed to manually convert them into Base64 format. Native applet only Base64 conversion of Woff2, the rest of the unprocessed need manual conversion, the following is my conversion method

To base64 format url:

transfonter.org/

Note that the Base64 button is off by default and must be turned onCopy the code

The stylesheet. CSS file will be copied into the font icon CSS file in the project