Introduce external custom fonts in Vue3

Download fonts for free: Query-Font Sharing Record Free commercial font downloads (Chinese fonts, traditional fonts, English fonts, Japanese fonts, Korean fonts), including authorization instructions, updated from time to time, and shared in good faith. https://ziti.fenxianglu.cn/query?obk=time&obv=desc

Or directly use the fonts that come with windows:

C:\Windows\Fonts

  Put the downloaded ttf file in the src/assets/font folder

font.css:

@font-face {
    font-family: "Sunday April";
    src: url('Sunday April.ttf');
}
@font-face {
    /* 自定义的字体名车，调用该字体时使用 */
    font-family: "Smiley_Sans_Oblique_斜体";
    /* 引用字体包。.ttf后缀不区分大小写，用.TTF也可以 */
    src: url('Smiley_Sans_Oblique_斜体.ttf'); 
    font-weight: normal;
    font-style: normal;
}

 Introduced in main.ts:

import "@/assets/font/font.css";

test:

 <h1 style="font-family: 'Smiley_Sans_Oblique_斜体'">test字体</h1>

 Effect:

For the following fonts, they can be used directly in CSS without importing:

A complete list of fonts supported by Chrome http://www.dve2.com/t/9