Skip to main content
Version: 3.x

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

PropertyTypeDefaultRequiredDescription
globalbooleanfalseNoSpecify to enable global effect
familystringYesDefined font name
sourcestringYesThe address of the font resource. The recommended formats are TTF and WOFF. WOFF2 is not compatible with older iOS versions.
descDescOptionNoAvailable font descriptors
complete(res: CallbackResult) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: CallbackResult) => voidNoThe callback function for a failed API call
success(res: CallbackResult) => voidNoThe callback function for a successful API call

DescOption

object.desc is composed as follows

PropertyTypeRequiredDescription
stylestringNoFont style. Available values: normal/italic/oblique
variantstringNoSets the font variant for small uppercase letters. Available values: normal/small-caps/inherit
weightstringNoFont 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

APIWeChat Mini ProgramH5React Native
Taro.loadFontFace✔️