# Custom Font Styles **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**. The custom font can be loaded from the font file in a project or a network font file. > **NOTE** > > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > > The font format can be .ttf or .otf. ## Defining @font-face ```css @font-face { font-family: HWfont; src: url('/common/HWfont.ttf'); } ``` **font-family**: name of the custom font. **src**: source of the custom font, which can be a font file in the project or an online font file. - 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). - Online font file: Specify the address of the online font through **url**. - You can set only one **src** attribute. ## Using font-face You can set **font-face** in **style** and specify the name of the **font-face** using **font-family**. The code snippet is as follows: - Page layout ```html