1# Custom Font Styles
2
3
4**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**.
5
6
7The custom font can be loaded from the font file in a project or a network font file.
8
9> **NOTE**
10>
11> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
12>
13> The font format can be .ttf or .otf.
14
15
16## Defining @font-face
17
18
19```css
20@font-face {
21  font-family: HWfont;
22  src: url('/common/HWfont.ttf');
23}
24```
25
26**font-family**: name of the custom font.
27
28**src**: source of the custom font, which can be a font file in the project or an online font file.
29
30- Font file in the project: Specify the absolute path of the font file in the project through **url**. For details, see [File Organization](js-service-widget-file.md).
31
32- Online font file: Specify the address of the online font through **url**.
33
34- You can set only one **src** attribute.
35
36
37## Using font-face
38
39You can set **font-face** in **style** and specify the name of the **font-face** using **font-family**. The code snippet is as follows:
40
41- Page layout
42
43  ```html
44  <div>
45    <text class="demo-text">Test the custom font.</text>
46  </div>
47  ```
48
49- Page style
50
51  ```css
52  @font-face {
53    font-family: HWfont;
54    src: url("/common/HWfont.ttf");
55  }
56  .demo-text {
57    font-family: HWfont;
58  }
59  ```
60