1# Custom Font Styles<a name="EN-US_TOPIC_0000001162414611"></a> 2 3- [Defining @font-face](#en-us_topic_0000001059340506_section185107316712) 4- [Using font-face](#en-us_topic_0000001059340506_section713052011710) 5 6**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**. 7 8The custom font can be loaded from the font file in a project. 9 10> **NOTE:** 11>The font format can be .ttf or .otf. 12 13## Defining @font-face<a name="en-us_topic_0000001059340506_section185107316712"></a> 14 15``` 16@font-face { 17 font-family: HWfont; 18 src: url('/common/HWfont.ttf'); 19} 20``` 21 22**font-family** 23 24Customize a font. 25 26**src** 27 28Supported sources of customized fonts: 29 30- Font file in the project: Specify the path of the font file in the project through **url**. \(You can use absolute paths only. For details, see [Resources and File Access Rules](file-organization.md#en-us_topic_0000001058830797_section6620355202117).\) 31 32- You can set only one **src** attribute. 33 34## Using font-face<a name="en-us_topic_0000001059340506_section713052011710"></a> 35 36You can set **font-face** in **style** and specify the name of the **font-face** using **font-family**. 37 38**Example** 39 40Page layout: 41 42``` 43<div> 44 <text class="demo-text">Test the customized font.</text> 45</div> 46``` 47 48Page style: 49 50``` 51@font-face { 52 font-family: HWfont; 53 src: url("/common/HWfont.ttf"); 54} 55.demo-text { 56 font-family: HWfont; 57} 58``` 59 60
