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 '@kit.ArkUI' 17``` 18 19## font.registerFont 20 21registerFont(options: FontOptions): void 22 23Registers a custom font with the font manager. 24 25**Atomic service API**: This API can be used in atomic services since API version 11. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29**Parameters** 30 31| Name | Type | Mandatory | Description | 32| ------- | --------------------------- | ---- | ----------- | 33| options | [FontOptions](#fontoptions) | Yes | Information about the custom font to register.| 34 35## FontOptions 36 37**Atomic service API**: This API can be used in atomic services since API version 11. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41| Name | Type | Mandatory | Description | 42| ---------- | ------ | ---- | ------------ | 43| familyName | string\| [Resource](arkui-ts/ts-types.md#resource)<sup>10+</sup> | Yes | Name of the custom font to register. | 44| familySrc | string\| [Resource](arkui-ts/ts-types.md#resource)<sup>10+</sup> | Yes | Path of the custom font to register.| 45 46**Example** 47 48> **NOTE** 49> 50> You are advised to 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. 51 52```ts 53// xxx.ets 54import { font } from '@kit.ArkUI'; 55 56@Entry 57@Component 58struct FontExample { 59 @State message: string = 'Hello World' 60 61 // iconFont example, where 0000 is the Unicode character of the specified icon. You need to obtain the Unicode character from the TTF file of the registered iconFont. 62 @State unicode: string = '\u0000' 63 @State codePoint: string = String.fromCharCode(0x0000) 64 65 aboutToAppear() { 66 // Both familyName and familySrc support the Resource type. 67 font.registerFont({ // You are advised to use the this.getUIContext().getFont().registerFont() API. 68 familyName: $r('app.string.font_name'), 69 familySrc: $r('app.string.font_src') 70 }) 71 72 // familySrc supports the $rawfile type. 73 font.registerFont({ 74 familyName: 'mediumRawFile', 75 familySrc: $rawfile('font/medium.ttf') 76 }) 77 78 // Register iconFont. 79 font.registerFont({ 80 familyName: 'iconFont', 81 familySrc: '/font/iconFont.ttf' 82 }) 83 84 // Both familyName and familySrc support the string type. 85 font.registerFont({ 86 familyName: 'medium', 87 familySrc: '/font/medium.ttf' // The font folder is at the same level as the pages folder. 88 }) 89 } 90 91 build() { 92 Column() { 93 Text(this.message) 94 .align(Alignment.Center) 95 .fontSize(20) 96 .fontFamily('medium') // medium: name of the custom font to register. (Registered fonts such as $r('app.string.mediumFamilyName') and 'mediumRawFile' can also be used.) 97 98 // Two methods of using iconFont 99 Text(this.unicode) 100 .align(Alignment.Center) 101 .fontSize(20) 102 .fontFamily('iconFont') 103 Text(this.codePoint) 104 .align(Alignment.Center) 105 .fontSize(20) 106 .fontFamily('iconFont') 107 }.width('100%') 108 } 109} 110``` 111> **NOTE** 112> 113> To use custom fonts globally in an application, register the fonts through the [windowStage.loadContent](js-apis-window.md#loadcontent9) API in the [onWindowStageCreate](../apis-ability-kit/js-apis-app-ability-uiAbility.md#uiabilityonwindowstagecreate) lifecycle callback in the **EntryAbility.ets** file. 114> 115> In an HSP project, avoid using a relative path to register a custom font. For details, see [Accessing Resources in an HSP Through $r](../../quick-start/in-app-hsp.md#accessing-resources-in-an-hsp-through-r). 116 117## font.getSystemFontList<sup>10+</sup> 118 119getSystemFontList(): Array\<string> 120 121Obtains the system font list. 122 123**Atomic service API**: This API can be used in atomic services since API version 11. 124 125**System capability**: SystemCapability.ArkUI.ArkUI.Full 126 127**Return value** 128 129| Type | Description | 130| -------------------- | ----------------- | 131| Array\<string> | List of supported fonts. | 132 133> **NOTE** 134> 135> This API takes effect only on 2-in-1 devices. 136 137**Example** 138 139> **NOTE** 140> 141> You are advised to 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. 142 143```ts 144// xxx.ets 145import { font } from '@kit.ArkUI'; 146 147@Entry 148@Component 149struct FontExample { 150 fontList: Array<string> = new Array<string>(); 151 build() { 152 Column() { 153 Button("getSystemFontList") 154 .width('60%') 155 .height('6%') 156 .onClick(()=>{ 157 this.fontList = font.getSystemFontList() // You are advised to use the this.getUIContext().getFont().getSystemFontList() API. 158 }) 159 }.width('100%') 160 } 161} 162``` 163 164## font.getFontByName<sup>10+</sup> 165 166getFontByName(fontName: string): FontInfo 167 168Obtains information about a system font based on the font name. 169 170**Atomic service API**: This API can be used in atomic services since API version 11. 171 172**System capability**: SystemCapability.ArkUI.ArkUI.Full 173 174**Parameters** 175 176| Name | Type | Mandatory | Description | 177| ---------- | --------- | ------- | ------------ | 178| fontName | string | Yes | System font name.| 179 180**Return value** 181 182| Type | Description | 183| ---------------- | ---------------------------- | 184| FontInfo | Information about the system font. | 185 186## FontInfo<sup>10+</sup> 187 188**Atomic service API**: This API can be used in atomic services since API version 11. 189 190**System capability**: SystemCapability.ArkUI.ArkUI.Full 191 192| Name | Type | Mandatory | Description | 193| -------------- | ------- | ------------------------- | ------------------------- | 194| path | string | Yes| File path of the system font. | 195| postScriptName | string | Yes| PostScript name of the system font.| 196| fullName | string | Yes| Name of the system font. | 197| family | string | Yes| Family of the system font. | 198| subfamily | string | Yes| Subfamily of the system font. | 199| weight | number | Yes| Weight of the system font, in px. | 200| width | number | Yes| Width of the system font, in px. | 201| italic | boolean | Yes| Whether the system font is italic. | 202| monoSpace | boolean | Yes| Whether the system font is monospaced. | 203| symbolic | boolean | Yes| Whether the system font supports symbols. | 204 205**Example** 206 207> **NOTE** 208> 209> You are advised to 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. 210 211```ts 212// xxx.ets 213import { font } from '@kit.ArkUI'; 214 215@Entry 216@Component 217struct FontExample { 218 fontList: Array<string> = new Array<string>(); 219 fontInfo: font.FontInfo = font.getFontByName(''); 220 build() { 221 Column() { 222 Button("getFontByName") 223 .onClick(() => { 224 this.fontInfo = font.getFontByName('HarmonyOS Sans Italic') // You are advised to use the this.getUIContext().getFont().getFontByName() API. 225 console.log("getFontByName(): path = " + this.fontInfo.path) 226 console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName) 227 console.log("getFontByName(): fullName = " + this.fontInfo.fullName) 228 console.log("getFontByName(): Family = " + this.fontInfo.family) 229 console.log("getFontByName(): Subfamily = " + this.fontInfo.subfamily) 230 console.log("getFontByName(): weight = " + this.fontInfo.weight) 231 console.log("getFontByName(): width = " + this.fontInfo.width) 232 console.log("getFontByName(): italic = " + this.fontInfo.italic) 233 console.log("getFontByName(): monoSpace = " + this.fontInfo.monoSpace) 234 console.log("getFontByName(): symbolic = " + this.fontInfo.symbolic) 235 }) 236 }.width('100%') 237 } 238} 239``` 240 241## font.getUIFontConfig<sup>11+</sup> 242getUIFontConfig() : UIFontConfig 243 244Obtains the UI font configuration of the system. 245 246**Atomic service API**: This API can be used in atomic services since API version 12. 247 248**System capability**: SystemCapability.ArkUI.ArkUI.Full 249 250**Return value** 251| Type | Description | 252| ---------------- | ---------------------------- | 253| [UIFontConfig](#uifontconfig11) | UI font configuration of the system. | 254 255## UIFontConfig<sup>11+</sup> 256 257**Atomic service API**: This API can be used in atomic services since API version 12. 258 259**System capability**: SystemCapability.ArkUI.ArkUI.Full 260| Name | Type | Mandatory | Description | 261| -------------- | ------- | ------------------------- | ------------------------- | 262| fontDir | Array\<string> | Yes| Path to the system font file. | 263| generic | Array\<[UIFontGenericInfo](#uifontgenericinfo11)> | Yes| List of supported generic font families.| 264| fallbackGroups | Array\<[UIFontFallbackGroupInfo](#uifontfallbackgroupinfo11)> | Yes| List of alternate generic font families. | 265 266## UIFontGenericInfo<sup>11+</sup> 267 268**Atomic service API**: This API can be used in atomic services since API version 12. 269 270**System capability**: SystemCapability.ArkUI.ArkUI.Full 271| Name | Type | Mandatory | Description | 272| -------------- | ------- | ------------------------- | ------------------------- | 273| family | string | Yes| Font family name, which is the value of **family** specified in the font file. | 274| alias | Array\<[UIFontAliasInfo](#uifontaliasinfo11)> | Yes| Alias list.| 275| adjust | Array\<[UIFontAdjustInfo](#uifontadjustinfo11)> | Yes| Weight of the font when displayed, which corresponds to the original weight.| 276 277## UIFontFallbackGroupInfo<sup>11+</sup> 278 279**Atomic service API**: This API can be used in atomic services since API version 12. 280 281**System capability**: SystemCapability.ArkUI.ArkUI.Full 282| Name | Type | Mandatory | Description | 283| -------------- | ------- | ------------------------- | ------------------------- | 284| fontSetName | string | Yes| Name of the font family corresponding to the alternate fonts. | 285| fallback | Array\<[UIFontFallbackInfo](#uifontfallbackinfo11)> | Yes| Alternate fonts for the font family. If **fontSetName** is **""**, it indicates that the fonts can be used as alternate fonts for all font families.| 286 287## UIFontAliasInfo<sup>11+</sup> 288 289**Atomic service API**: This API can be used in atomic services since API version 12. 290 291**System capability**: SystemCapability.ArkUI.ArkUI.Full 292| Name | Type | Mandatory | Description | 293| -------------- | ------- | ------------------------- | ------------------------- | 294| name | string | Yes| Alias name. | 295| weight | number | Yes| Weight of the fonts included in the font family. If the value is greater than 0, the font family contains only the fonts with the specified weight. If the value is 0, the font family contains all fonts.| 296 297## UIFontAdjustInfo<sup>11+</sup> 298 299**Atomic service API**: This API can be used in atomic services since API version 12. 300 301**System capability**: SystemCapability.ArkUI.ArkUI.Full 302| Name | Type | Mandatory | Description | 303| -------------- | ------- | ------------------------- | ------------------------- | 304| weight | number | Yes| Original weight of the font. | 305| to | number | Yes| Weight of the font displayed in the application.| 306 307## UIFontFallbackInfo<sup>11+</sup> 308 309**Atomic service API**: This API can be used in atomic services since API version 12. 310 311**System capability**: SystemCapability.ArkUI.ArkUI.Full 312| Name | Type | Mandatory | Description | 313| -------------- | ------- | ------------------------- | ------------------------- | 314| language | string | Yes| Language supported by the font family. The language format is BCP 47. | 315| family | string | Yes| Font family name, which is the value of **family** specified in the font file.| 316 317**Example** 318 319```ts 320// xxx.ets 321import { font } from '@kit.ArkUI'; 322 323@Entry 324@Component 325struct FontExample { 326 build() { 327 Column() { 328 Button("getUIFontConfig") 329 .width('60%') 330 .height('6%') 331 .margin(50) 332 .onClick(()=>{ 333 let fontConfig = font.getUIFontConfig(); 334 console.log("font-dir -----------" + String(fontConfig.fontDir.length)); 335 for (let i = 0; i < fontConfig.fontDir.length; i ++) { 336 console.log(fontConfig.fontDir[i]); 337 } 338 console.log("generic-------------" + String(fontConfig.generic.length)); 339 for (let i = 0; i < fontConfig.generic.length; i ++){ 340 console.log("family:" + fontConfig.generic[i].family); 341 for (let j = 0; j < fontConfig.generic[i].alias.length; j ++){ 342 console.log(fontConfig.generic[i].alias[j].name + " " + fontConfig.generic[i].alias[j].weight); 343 } 344 for (let j = 0; j < fontConfig.generic[i].adjust.length; j ++){ 345 console.log(fontConfig.generic[i].adjust[j].weight + " " + fontConfig.generic[i].adjust[j].to); 346 } 347 } 348 console.log("fallback------------" + String(fontConfig.fallbackGroups.length)); 349 for (let i = 0; i < fontConfig.fallbackGroups.length; i ++){ 350 console.log("fontSetName:" + fontConfig.fallbackGroups[i].fontSetName); 351 for (let j = 0; j < fontConfig.fallbackGroups[i].fallback.length; j ++){ 352 console.log("language:" + fontConfig.fallbackGroups[i].fallback[j].language + " family:" + fontConfig.fallbackGroups[i].fallback[j].family); 353 } 354 } 355 }) 356 }.width('100%') 357 } 358} 359``` 360<!--no_check-->