The applet Android and ios use custom fonts to solve the problem that Android does not take effect

Official website introduction

• The loadFontFace of the official website file can also implement the introduction and use of custom fonts. If you need to use it in app.js, remember to add global: true, otherwise app.js will not be executed.
• Background: In the project, all fonts should be changed to Arial, here I use font-face to import external font files

Prepare font files

• Here I am preparing OTF files, which I want from UI.
• Upload the file to your own server and generate an access link.
• Use in app.wxss

@font-face {
    
    
  font-family: 'SimSun700';
  src: url('链接地址必须是https的')format('truetype');
}

.sim-sun700 {
    
    
  font-family: 'SimSun700' !important;
}

• Define the class name of css, so that you can use the class name directly when you need to use it

test

• After defining the font, you will find that the font is valid on the simulator and ios mobile phone, but the font is not valid on Android.

Android debugging to solve the font failure problem

• Using the official method of loadFontFace, it is found that it is not easy to use on Android. However, there is a failure function callback in the official website method, and it is found that the font has not been loaded successfully. There is an explanation on the official website: the font link must be under the same origin, or cors support is enabled, and the domain name of the applet is servicewechat.com
• It is speculated that it should be the problem of the same origin policy, let the background go to the server to open the cross domain solution.

//nginx 配置，亲测可用
location ~* \.(eot|ttf|woff|woff2|svg)$ {
    
    
    add_header Access-Control-Allow-Origin *;
}

• After configuring the above code, importing font Android using font-face and loadFontFace is effective.