Font

loadFontFace

TIP

The API usage is as follows: wx.loadFontFace(Object object)

• Functional description: Dynamically load network fonts, the file address must be of download type, and must be called in js.

  TIP

  • The content-type returned by the font file refers to font. If the format is incorrect, parsing will fail.
  • For real machine compatibility, the font link must be https
  • The font link must be from the same source, or cors support is enabled. The default domain name of the mini program is servicewechat.com (if the client has a custom domain name, please adjust it according to the custom configuration here);
  • The tool prompt Failed to load font can be ignored.

• Parameters and descriptions: Object object

Properties	Type	Default value	Required	Description
family	string	-	Yes	The defined font name
source	string	-	Yes	The address of the font resource. Recommended formats are TTF and WOFF. WOFF2 is not compatible on lower versions of iOS
desc	object	-	No	Optional font descriptor
success	Function	-	No	Callback function for successful interface call
fail	Function	-	No	Callback function for failed interface call
complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• desc structure value

  Structure properties	Type	Default value	Required	Description
  style	string	normal	Yes	Font style, optional values
  weight	string	normal	Yes	Font weight, optional values
  variant	string	normal	Yes	Set the font display text of small capital letters, optional values

• object.success callback function parameters: Object res

Properties	Type	Description
status	string	Load font result

• object.fail callback function parameter: Object res

Properties	Type	Description
status	string	Load font result

• object.complete callback function parameter: Object res

Properties	Type	Description
status	string	Load font result

• Sample code:

// https://sungd.github.io/Pacifico.ttf Font links need to have https enabled and cross-domain settings turned on
wx.loadFontFace({
  family: ‘Bitstream Vera Serif Bold’,
  family: ‘MyFont’.
  source: ‘url(’https://sungd.github.io/Pacifico.ttf‘)’,
  Success: console.log
})

page {
  font-family: 'MyFont';
}