title: Taro.loadFontFace(option)

sidebar_label: loadFontFace

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

  1. (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

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

API Support

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