Customize fonts
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:
- Open the app.acss file in your mini-program project.
- Locate the wildcard selector
*
or create a new selector to define the font styles. - 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:
copy
* {
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:
- Open the app.acss file in your mini-program project.
- 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:
copy
@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");
}
- 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:
copy
page {
font-family: "My Font";
}