Custom Font v0.12.0+#


Weex provide the ability of loading custom through DOM.addRule. Developers can load iconfont and custom font by specifying the font-family.


Developers may use the following code snippet to load their font:

const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('')"

The parameter of Add Rule is illustrated as following:

  • fontFace You should not change this as this is the name of the font rule
  • fontFamily You should provide the name of your font-family there, the valid name should be a string.
  • src The src of your custom font, and url(‘’) is reserved for protocol reason, the supported parameters are listed below:
    • http. Read from http, e.g. url('')
    • https. Read from https, e.g. url('')
    • local, Android ONLY. Read from assets directory e.g. url('local://foo.ttf'), the foo.ttf is in your android assets directory.
    • file. Read from a local file, e.g. url('file://storage/emulated/0/Android/data/')
    • data. Read from a base64 data source, e.g. url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....'), the above data field is only a part of the actual data.


Note: You can name fontFamily in addRule as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a ‘?’.

Note: Specially, if you are using to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.

Note: Calling addRule in beforeCreate is recommended.


Check the custom font example.

Edit this page on GitHub