Taro.loadFontFace(option)
Dynamically loads network fonts. The file URL must be a download URL. Only https URLs are supported for iOS.
Note:
- 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.
- The font link must be an https URL. (http is not supported for iOS)
- The font link must be of the same origin, or have enabled cors support. The domain name of the Mini Program is servicewechat.com.
- Native components such as canvas do not support fonts added using APIs.
- The "Faild to load font" prompt in the DevTools can be ignored.
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 | ✔️ |