1# Custom Font Styles
2
3The custom font can be loaded from the font file in a project. The font file must be in .ttf or .otf format.
4
5>  **NOTE**
6>
7>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Defining @font-face
11
12```
13@font-face {
14  font-family: font;
15  src: url('/common/font.ttf');
16}
17```
18
19**font-family**
20
21Customize a font.
22
23**src**
24
25Supported sources of custom fonts:
26
27- 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).
28
29- You can set only one **src** attribute.
30
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```html
40<!-- xxx.hml -->
41<div>
42  <text class="demo-text">Test the custom font.</text>
43</div>
44```
45
46Page style:
47
48```css
49/*xxx.css*/
50@font-face {
51  font-family: font;
52  src: url("/common/font.ttf");
53}
54.demo-text {
55  font-family: font;
56}
57```
58