Micro-channel programs (Note) - applet use custom fonts

First, referrer URL

Want to use custom fonts need to introduce external font library, first download the fonts they need, after the download is complete * .TTF * .ttf file or files, use the files in the reference links on their own servers.

Use the default font is so

Micro-channel dynamic font download method

    wx.loadFontFace({
      family: 'GJGMedium',
      source: 'url("https://zijiadewangzhi.com/font/GenJyuuGothic-Medium.ttf")',
      success(res){
        console.log(res)
      },
      fail: function (res) {
        console.log(res)
      },
      complete: function (res) {
        console.log(res)
      }
    })

　　

This is the download was successful return

This is a failure

 

If you have been given the okay, do not control

 

 Note: Use the link begins with https

The official document: https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

 Cons: download failed when no reasons, but most of the fonts I use are not the problem

Second, the Compact Font

Because of the special font characters I use very little reference to the entire font library up a lot of space, so I found a way to compress a font library, only the fonts required to extract

The former is not compressed: 2.73MB

 

 

First, download a software [Fontmin], is simple to use

Official Website: https://ecomfe.github.io/fontmin/

After the download is a compressed package

 

 

 Unpack the two files

 

 

 Open software is so

 

 

Left of the text fragments used to enter text, drag the downloaded font library to the bottom left, click generate

 

 

 After a successful folder, inside there are a variety of formats font library

 

 

 * .TTF can see the compressed file is only 5KB, but we do not need this, need that last a * .css file, use Notepad to open, copy it to the applet file app.wxss

 

 

 Leaving only the most that url (data: ...) this line

　　

 

success!