Note how vue3 introduces third-party fonts

The free font used this time is Alibaba’s iconfont, which is free for commercial use. Let’s start today’s tutorial without further ado.

1. Open iconfont official website

2. Select the font that meets your requirements and download the font package

3. How to use

1. Unzip, then create a font folder in the assets of the project, and put the font you want to use in the decompression package into the font folder

For example: the font I choose isAlibaba_PuHuiTi_2.0_55_Regular_55_Regular

2. Create a font.css file and import it

font-family corresponds to the font name you use

@font-face {
    
    
    font-family: "Alibaba_PuHuiTi_2.0_55_Regular_55_Regular";
    src: url('./Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf');
    font-weight: normal;
    font-style: normal;
  }

3. Enter App.vue

For the root label app, it means that the entire project uses this font

#app {
    
    
  font-family: "Source_Han_Serif_CN_VF_Regular";
}

4. Practice verification

ok, take it easily.