1# @ohos.font (Custom Font Registration) 2 3The **font** module provides APIs for registering custom fonts. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8> 9> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [getFont](./js-apis-arkui-UIContext.md#getfont) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [Font](./js-apis-arkui-UIContext.md#font) object associated with the current UI context. 12 13## Modules to Import 14 15```ts 16import font from '@ohos.font' 17``` 18 19## font.registerFont 20 21registerFont(options: FontOptions): void 22 23Registers a custom font with the font manager. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27**Parameters** 28 29| Name | Type | Mandatory | Description | 30| ------- | --------------------------- | ---- | ----------- | 31| options | [FontOptions](#fontoptions) | Yes | Information about the custom font to register.| 32 33## FontOptions 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Name | Type | Mandatory | Description | 38| ---------- | ------ | ---- | ------------ | 39| familyName | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>10+</sup> | Yes | Name of the custom font to register. | 40| familySrc | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>10+</sup> | Yes | Path of the custom font to register.| 41 42**Example** 43 44```ts 45// xxx.ets 46import font from '@ohos.font'; 47 48@Entry 49@Component 50struct FontExample { 51 @State message: string =' Hello, World' 52 53 aboutToAppear() { 54 // Both familyName and familySrc support the string type. 55 font.registerFont({ 56 familyName: 'medium', 57 familySrc: '/font/medium.ttf' // The font file is at the same level as the pages directory. 58 }) 59 60 // Both familyName and familySrc support the Resource type. 61 font.registerFont({ 62 familyName: $r('app.string.mediumFamilyName'), 63 familySrc: $r('app.string.mediumFamilySrc') 64 }) 65 66 // familySrc supports the $rawfile type. 67 font.registerFont({ 68 familyName: 'mediumRawFile', 69 familySrc: $rawfile('font/medium.ttf') 70 }) 71 } 72 73 build() { 74 Column() { 75 Text(this.message) 76 .align(Alignment.Center) 77 .fontSize(20) 78 .fontFamily('medium') // medium: name of the custom font to register. (Registered fonts such as $r('app.string.mediumFamilyName') and 'mediumRawFile' can also be used.) 79 .height('100%') 80 }.width('100%') 81 } 82} 83``` 84## font.getSystemFontList<sup>10+</sup> 85 86getSystemFontList(): Array\<string> 87 88Obtains the list of supported fonts. 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92**Return value** 93 94| Type | Description | 95| -------------------- | ----------------- | 96| Array\<string> | List of supported fonts. | 97 98**Example** 99 100```ts 101// xxx.ets 102import font from '@ohos.font'; 103 104@Entry 105@Component 106struct FontExample { 107 fontList: Array<string> = new Array<string>(); 108 build() { 109 Column() { 110 Button("getSystemFontList") 111 .width('60%') 112 .height('6%') 113 .onClick(()=>{ 114 this.fontList = font.getSystemFontList() 115 }) 116 }.width('100%') 117 } 118} 119``` 120 121## font.getFontByName<sup>10+</sup> 122 123getFontByName(fontName: string): FontInfo; 124 125Obtains information about a system font based on the font name. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name | Type | Mandatory | Description | 132| ---------- | --------- | ------- | ------------ | 133| fontName | string | Yes | System font name.| 134 135**Return value** 136 137| Type | Description | 138| ---------------- | ---------------------------- | 139| FontInfo | Information about the system font. | 140 141## FontInfo<sup>10+</sup> 142 143**System capability**: SystemCapability.ArkUI.ArkUI.Full 144 145| Name | Type | Mandatory | Description | 146| -------------- | ------- | ------------------------- | ------------------------- | 147| path | string | Yes| File path of the system font. | 148| postScriptName | string | Yes| PostScript name of the system font.| 149| fullName | string | Yes| Name of the system font. | 150| family | string | Yes| Family of the system font. | 151| subfamily | string | Yes| Subfamily of the system font. | 152| weight | number | Yes| Weight of the system font. | 153| width | number | Yes| Width of the system font. | 154| italic | boolean | Yes| Whether the system font is italic. | 155| monoSpace | boolean | Yes| Whether the system font is monospaced. | 156| symbolic | boolean | Yes| Whether the system font supports symbols. | 157 158**Example** 159 160```ts 161// xxx.ets 162import font from '@ohos.font'; 163 164@Entry 165@Component 166struct FontExample { 167 fontList: Array<string> = new Array<string>(); 168 fontInfo: font.FontInfo = font.getFontByName(''); 169 build() { 170 Column() { 171 Button("getFontByName") 172 .onClick(() => { 173 this.fontInfo = font.getFontByName('Sans Italic') 174 console.log("getFontByName(): path = " + this.fontInfo.path) 175 console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName) 176 console.log("getFontByName(): fullName = " + this.fontInfo.fullName) 177 console.log("getFontByName(): Family = " + this.fontInfo.family) 178 console.log("getFontByName(): Subfamily = " + this.fontInfo.subfamily) 179 console.log("getFontByName(): weight = " + this.fontInfo.weight) 180 console.log("getFontByName(): width = " + this.fontInfo.width) 181 console.log("getFontByName(): italic = " + this.fontInfo.italic) 182 console.log("getFontByName(): monoSpace = " + this.fontInfo.monoSpace) 183 console.log("getFontByName(): symbolic = " + this.fontInfo.symbolic) 184 }) 185 }.width('100%') 186 } 187} 188``` 189