Custom Font Styles

The custom font can be loaded from the font file in a project. The font file must be in .ttf or .otf format.

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

// xxx.js
@font-face {
  font-family: font;
  src: url('/common/font.ttf');
}

font-family

Customize a font.

src

Supported sources of custom fonts:

Font file in the project: Specify the absolute path of the font file in the project through url. For details, see File Access Rules.
You can set only one src attribute.

You can set font-face in style and specify the name of the font-face using font-family.

Example

Page layout:

<!-- xxx.hml -->
<div>    
  <text class="demo-text">Test the custom font.</text>  
</div>

Page style:

/*xxx.css*/
@font-face {
  font-family: font;
  src: url("/common/font.ttf");
}
.demo-text {
  font-family: font;
}