@ohos.font (Custom Font Registration)

The font module provides APIs for registering custom fonts.

NOTE

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.

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.

Since API version 10, you can use the getFont API in UIContext to obtain the Font object associated with the current UI context.

Modules to Import

import font from '@ohos.font'

font.registerFont

registerFont(options: FontOptions): void

Registers a custom font with the font manager.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

FontOptions

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

// xxx.ets
import font from '@ohos.font';

@Entry
@Component
struct FontExample {
  @State message: string = 'Hello World'

  // 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.
  @State unicode: string = '\u0000'
  @State codePoint: string = String.fromCharCode(0x0000)

  aboutToAppear() {
    // Both familyName and familySrc support the string type.
    font.registerFont({
      familyName: 'medium',
      familySrc: '/font/medium.ttf' // The font folder is at the same level as the pages folder.
    })

    // Both familyName and familySrc support the Resource type.
    font.registerFont({
      familyName: $r('app.string.font_name'),
      familySrc: $r('app.string.font_src')
    })

    // familySrc supports the $rawfile type.
    font.registerFont({
      familyName: 'mediumRawFile',
      familySrc: $rawfile('font/medium.ttf')
    })

    // Register iconFont.
    font.registerFont({
      familyName: 'iconFont',
      familySrc: '/font/iconFont.ttf'
    })
  }

  build() {
    Column() {
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('medium') // medium: name of the custom font to register. (Registered fonts such as $r('app.string.mediumFamilyName') and 'mediumRawFile' can also be used.)
      
      // Two methods of using iconFont
      Text(this.unicode)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont')
      Text(this.codePoint)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont')
    }.width('100%')
  }
}

font.getSystemFontList¹⁰⁺

getSystemFontList(): Array<string>

Obtains the list of supported fonts.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Example

// xxx.ets
import font from '@ohos.font';

@Entry
@Component
struct FontExample {
  fontList: Array<string> = new Array<string>();
  build() {
    Column() {
      Button("getSystemFontList")
        .width('60%')
        .height('6%')
        .onClick(()=>{
          this.fontList = font.getSystemFontList()
        })
    }.width('100%')
  }
}

font.getFontByName¹⁰⁺

getFontByName(fontName: string): FontInfo

Obtains information about a system font based on the font name.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

FontInfo¹⁰⁺

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

// xxx.ets
import font from '@ohos.font';

@Entry
@Component
struct FontExample {
  fontList: Array<string> = new Array<string>();
  fontInfo: font.FontInfo = font.getFontByName('');
  build() {
    Column() {
      Button("getFontByName")
        .onClick(() => {
          this.fontInfo = font.getFontByName('Sans Italic')
          console.log("getFontByName(): path = " + this.fontInfo.path)
          console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName)
          console.log("getFontByName(): fullName = " + this.fontInfo.fullName)
          console.log("getFontByName(): Family = " + this.fontInfo.family)
          console.log("getFontByName(): Subfamily = " + this.fontInfo.subfamily)
          console.log("getFontByName(): weight = " + this.fontInfo.weight)
          console.log("getFontByName(): width = " + this.fontInfo.width)
          console.log("getFontByName(): italic = " + this.fontInfo.italic)
          console.log("getFontByName(): monoSpace = " + this.fontInfo.monoSpace)
          console.log("getFontByName(): symbolic = " + this.fontInfo.symbolic)
        })
    }.width('100%')
  }
}

font.getUIFontConfig¹¹⁺

getUIFontConfig() : UIFontConfig

Obtains the UI font configuration of the system.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

UIFontConfig¹¹⁺

System capability: SystemCapability.ArkUI.ArkUI.Full

UIFontGenericInfo¹¹⁺

System capability: SystemCapability.ArkUI.ArkUI.Full

UIFontFallbackGroupInfo¹¹⁺

System capability: SystemCapability.ArkUI.ArkUI.Full

UIFontAliasInfo¹¹⁺

System capability: SystemCapability.ArkUI.ArkUI.Full

UIFontAdjustInfo¹¹⁺

System capability: SystemCapability.ArkUI.ArkUI.Full

UIFontFallbackInfo¹¹⁺

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

// xxx.ets
import font from '@ohos.font';
@Entry
@Component
struct FontExample {
  build() {
    Column() {
      Button("getUIFontConfig")
        .width('60%')
        .height('6%')
        .margin(50)
        .onClick(()=>{
          let fontConfig = font.getUIFontConfig();
          console.log("font-dir -----------" + String(fontConfig.fontDir.length));
          for (let i = 0; i < fontConfig.fontDir.length; i ++) {
            console.log(fontConfig.fontDir[i]);
          }
          console.log("generic-------------" + String(fontConfig.generic.length));
          for (let i = 0; i < fontConfig.generic.length; i ++){
            console.log("family:" + fontConfig.generic[i].family);
            for (let j = 0; j < fontConfig.generic[i].alias.length; j ++){
              console.log(fontConfig.generic[i].alias[j].name + " " + fontConfig.generic[i].alias[j].weight);
            }
            for (let j = 0; j < fontConfig.generic[i].adjust.length; j ++){
              console.log(fontConfig.generic[i].adjust[j].weight + " " + fontConfig.generic[i].adjust[j].to);
            }
          }
          console.log("fallback------------" + String(fontConfig.fallbackGroups.length));
          for (let i = 0; i < fontConfig.fallbackGroups.length; i ++){
            console.log("fontSetName:" + fontConfig.fallbackGroups[i].fontSetName);
            for (let j = 0; j < fontConfig.fallbackGroups[i].fallback.length; j ++){
              console.log("language:" + fontConfig.fallbackGroups[i].fallback[j].language + " family:" + fontConfig.fallbackGroups[i].fallback[j].family);
            }
          }
        })
    }.width('100%')
  }
}