1# Custom Font Styles 2 3**font-face** is used to define the font style. You can define **font-face** in **style** to specify a font name and resource for your application and then reference this font from **font-family**. 4 5The custom font can be loaded from the font file in a project. The font file must be in .ttf or .otf format. 6 7> **NOTE** 8> 9> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Defining @font-face 13 14``` 15@font-face { 16 font-family: font; 17 src: url('/common/font.ttf'); 18} 19``` 20 21**font-family** 22 23Customize a font. 24 25**src** 26 27Supported sources of custom fonts: 28 29- Font file in the project: Specify the absolute path of the font file in the project through **url**. For details, see [File Access Rules](../../ui/js-framework-file.md). 30- You can set only one **src** attribute. 31 32## Using font-face 33 34You can set **font-face** in **style** and specify the name of the **font-face** using **font-family**. 35 36**Example** 37 38Page layout: 39 40``` 41<div> 42 <text class="demo-text">Test the customized font.</text> 43</div> 44``` 45 46Page style: 47 48``` 49@font-face { 50 font-family: font; 51 src: url("/common/font.ttf"); 52} 53.demo-text { 54 font-family: font; 55} 56```