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-->