The small program uses the Vant component to report an error Failed to load font solution

After the Mini Program references the Vant component, an error will be reported every time it is recompiled

[Rendering layer network layer error] Failed to load font https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952

Although it does not affect the operation of the applet, it is uncomfortable to watch

According to the online tutorial, after adding "https://at.alicdn.com" to the legal domain name of the request, an error will still be reported. Instead of using the network request, download it directly, convert it into Base64 encode, and use it locally

Find miniprogram_npm in the project, right-click and select Find in Folder (note that I used the npm method to import, other methods may have different folder names, and select the folder to search according to your actual situation)

Enter at.alicdn.com, you can directly locate these 3 URLs, where the error is generated (you can right-click in the editor first, format the code)

We directly copy these three links to the browser to download and get these three files respectively

font_2553510_iv4v8nulyz.woff2
font_2553510_iv4v8nulyz.woff
font_2553510_iv4v8nulyz.ttf

Or directly download the [1] I downloaded , see the link at the end of the article

Open Online @font-face generator — Transfonter , convert online fonts to base64 format, and convert 3 files respectively

 

 

Get 3 compressed packages, if you are too lazy to convert, you can directly use my converted [2]

Open the css files under the compressed package separately, copy the first one from src:url....... to format('woff2'), be careful not to include a semicolon, overwrite and paste it to the original position under index.wxss, and then English comma, the second is copied from url....... to format('woff'), English comma, the third is copied from url....... to format('ttf')

 

 

Then save index.wxss, clear the cache, recompile, the error disappears

Similarly, if you are too lazy to paste, you can directly use [3] that I pasted to cover the corresponding position, for example, mine is

工程目录\miniprogram_npm\@vant\weapp\icon

Note: Please overwrite carefully. It is recommended to make a backup before overwriting. There may be changes in other places in the file (index.wxss) in the subsequent Vant update version. It is recommended to do it yourself

Link: https://pan.baidu.com/s/1O8HSWCpZFbA85pdo1ltozg?pwd=1234 
Extraction code: 1234