Taro.loadFontFace(option)

Dynamically loads network fonts. The file URL must be a download URL. Only https URLs are supported for iOS.

Note:

1. When you use a Chinese font with an excessive volume, an error may occur. It is recommended to reduce Chinese characters or use pictures instead.
2. The font link must be an https URL. (http is not supported for iOS)
3. The font link must be of the same origin, or have enabled cors support. The domain name of the Mini Program is servicewechat.com.
4. Native components such as canvas do not support fonts added using APIs.
5. The "Faild to load font" prompt in the DevTools can be ignored.

Reference

Type

(option: Option) => void

Parameters

Option

Property	Type	Default	Required	Description
global	boolean	false	No	Specify to enable global effect
family	string		Yes	Defined font name
source	string		Yes	The address of the font resource. The recommended formats are TTF and WOFF. WOFF2 is not compatible with older iOS versions.
desc	DescOption		No	Available font descriptors
complete	(res: CallbackResult) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: CallbackResult) => void	No	The callback function for a failed API call
success	(res: CallbackResult) => void	No	The callback function for a successful API call

DescOption

object.desc is composed as follows

Property	Type	Required	Description
style	string	No	Font style. Available values: normal/italic/oblique
variant	string	No	Sets the font variant for small uppercase letters. Available values: normal/small-caps/inherit
weight	string	No	Font weight. Available values: normal/bold/100/200/900

Sample Code

Taro.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success: console.log
})

API Support

API	WeChat Mini Program	H5	React Native
Taro.loadFontFace	✔️