uniapp uses 3rd party fonts

One, CSS remote loading

App.vue

@font-face{
font-family: font-name;
src:url('https://XXXXX/font.ttf');
}
in the WeChat appletIt is useful in developer tools, but (Android) real machine debugging is useless

Second, the introduction of local fonts, the program will not upload if the size is too large---the font.ttf file will be converted into base64 format

File conversion address--transfonter

Use

Three, use API uni.loadFontFace()

App.vue

onLaunch: function () {uni.loadFontFace({global: true, // whether to take effect globallyfamily: 'font-name', // Defined font namesource: 'url("https://xxx.com/font/font-name.ttf")', // The address of the font resource.The recommended formats are TTF and WOFF, WOFF2 will be incompatible on lower versions of iOS.success() {console.log('successful callback function')},fail(){console.log('Failed callback function')},complete(){console.log('The callback function at the end of the interface call (the call will be executed if the call succeeds or fails)')}})},

API description: uni.loadFontFace(Object object) | uni-app official website, the development documents of WeChat mini-programs also have corresponding methods. Special attention should be paid to:

Also note that in this discussion wx.loadFontFace loads fonts, Android real machine fails, simulator and ios real machine are normal | WeChat open community , mentioned by the small program technical specialist

Use font website to download-font world

Use.font-name {font-family: font-name;}