Registering and Using Custom Fonts (ArkTS)

// Index.ets
import { NodeController, FrameNode, RenderNode, DrawContext } from '@kit.ArkUI'
import { UIContext } from '@kit.ArkUI'
import { text } from '@kit.ArkGraphics2D'

// Obtain the global font set instance.
let fontCollection = text.FontCollection.getGlobalInstance(); // Obtain the ArkUI global FC.
const familyName = "myFamilyName"

// Create a custom render node class to draw text.
class MyRenderNode extends RenderNode {
  async draw(context: DrawContext) {
    // Create a canvas object.
    const canvas = context.canvas
    // Use the custom font.
    let myFontFamily: Array<string> = [familyName] // If a custom font has been registered, enter the font family name of the custom font.
    // Set the text style.
    let myTextStyle: text.TextStyle = {
      color: {
        alpha: 255,
        red: 255,
        green: 0,
        blue: 0
      },
      fontSize: 30,
      // Add the custom font to the text style.
      fontFamilies: myFontFamily
    };
    // Create a paragraph style object to set the typography style.
    let myParagraphStyle: text.ParagraphStyle = {
      textStyle: myTextStyle,
      align: 3,
      wordBreak: text.WordBreak.NORMAL
    };
    // Create a paragraph generator.
    let ParagraphGraphBuilder = new text.ParagraphBuilder(myParagraphStyle, fontCollection)
    // Set the text style in the paragraph generator.
    ParagraphGraphBuilder.pushStyle(myTextStyle);
    // Set the text content in the paragraph generator.
    ParagraphGraphBuilder.addText("Custom font test");
    // Generate a paragraph using the paragraph generator.
    let paragraph = ParagraphGraphBuilder.build();
    // Set the paragraph width to 1000 px.
    paragraph.layoutSync(1000);
    paragraph.paint(canvas, 0, 400);
  }
}

// Create and initialize a render node instance.
const newNode = new MyRenderNode();
// Set the position and size of the render node.
newNode.frame = {
  x: 0,
  y: 0,
  width: 400,
  height: 600
};


class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode {
    this.rootNode = new FrameNode(uiContext)
    if (this.rootNode == null) {
      return this.rootNode
    }
    const renderNode = this.rootNode.getRenderNode()
    if (renderNode != null) {
      renderNode.frame = {
        x: 0,
        y: 0,
        width: 300,
        height: 50
      }
      renderNode.pivot = { x: 0, y: 0 }
    }
    return this.rootNode
  }

  addNode(node: RenderNode): void {
    if (this.rootNode == null) {
      return
    }
    const renderNode = this.rootNode.getRenderNode()
    if (renderNode != null) {
      renderNode.appendChild(node)
    }
  }

  clearNodes(): void {
    if (this.rootNode == null) {
      return
    }
    const renderNode = this.rootNode.getRenderNode()
    if (renderNode != null) {
      renderNode.clearChildren()
    }
  }
}

@Entry
@Component
struct RenderTest {
  private myNodeController: MyNodeController = new MyNodeController()

  build() {
    Column() {
      Row() {
        // If fontCollection of getGlobalInstance is used to register a font, the component corresponding to the family name is automatically refreshed.
        Text("Text Component")
          .fontFamily(familyName)
        NodeContainer(this.myNodeController)
          .height('100%')
          .onAppear(() => {
            this.myNodeController.clearNodes()
            this.myNodeController.addNode(newNode)
          })
      }
      .height('90%')
      .backgroundColor(Color.White)

      Row() {
        Button($r('app.string.Button_load_font'))
          .fontSize('16fp')
          .fontWeight(500)
          .margin({ bottom: 24, right: 12 })
          .onClick(() => {
            // Register the custom font.
            fontCollection.loadFontSync(familyName, 'file:///system/fonts/NotoSansMalayalamUI-SemiBold.ttf')
            // Refresh the node that uses fontCollection after the registration.
            newNode.invalidate()
          })
          .width('30%')
          .height(40)
          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
        Button($r('app.string.Button_unload_font'))
          .fontSize('16fp')
          .fontWeight(500)
          .margin({ bottom: 24, right: 12 })
          .onClick(() => {
            // Unregister the custom font.
            fontCollection.unloadFontSync(familyName)
            // Refresh the node that uses fontCollection after the unregistration.
            newNode.invalidate()
          })
          .width('30%')
          .height(40)
          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center) // Align the child elements in the current Row container to the center of the main axis.
      .shadow(ShadowStyle.OUTER_DEFAULT_SM) // Set the shadow effect outside the Row container.
      .alignItems(VerticalAlign.Bottom) // Align the child elements in the current Row container to the bottom of the cross axis (vertical direction).
      .layoutWeight(1) // Set the layout weight of the current Row in the parent Column container to 1.
    }
  }
}

Index.ets