This topic helps mini-program developers to customize fonts in mini programs to enhance visual appeal. When customizing fonts, mini-program developers can choose from the following two options:

• Use system fonts
• Use external fonts

Before you begin

Before customizing fonts in your mini programs, ensure that you are familiar with the following:

• Front-end development
• The structure of mini programs
• The ACSS file
• The @font-face rule

Use system fonts

Take the following steps to use system fonts:

1. Open the app.acss file in your mini-program project.
2. Locate the wildcard selector * or create a new selector to define the font styles.
3. Use the font-family property to specify the desired font. You can list multiple fonts to provide fallback options. Refer to the following code for an example:

* {
    font-style: normal;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

Use external fonts

Take the following steps to use external fonts:

1. Open the app.acss file in your mini-program project.
2. Within the file, use the @font-face rule to define your custom font with the following two properties:

• font-family: Specify a name for your font.
• src: Specify the location of your font files. You can include multiple formats to ensure compatibility across different platforms. Both locally-stored and remote font files are supported, but it is recommended to store your font files on a remote server to avoid a large project package size. Refer to the following code for an example:

@font-face {
  font-family: "My Font";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff"),
       url("https://mdn.mozillademos.org/files/2468/myfont.ttf") format("opentype");
}

3. To apply the custom font to specific styles, such as a page, simply use the font-family property and specify the font name you defined in the @font-face rule. Refer to the following code for an example:

page {
    font-family: "My Font";
}