Use external fonts in vue3

First of all, you need to find a free website to download the font you want to use.  DaFont is recommended - Download fonts

Or ask the UI, the UI will also download the corresponding special font package when designing the drawing, so it is convenient and quick to ask her~~

If you enter the website to download, the operation steps are as follows:

Enter the name of the font you want to download in the upper right corner of the official website, and click the search button behind

 Click to download

 Unzip after downloading, there are four types of corresponding fonts

In the project use:

Under the assets folder in the vue project, create a new font folder and put these four files in it

 Then create a new font.css file and write font variables in it

@font-face {
      font-family: "DS-DIGI";
      src: url('./DS-DIGI.TTF');
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: "DS-DIGIB";
      src: url('./DS-DIGIB.TTF');
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: "DS-DIGII";
      src: url('./DS-DIGII.TTF');
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: "DS-DIGIT";
      src: url('./DS-DIGIT.TTF');
      font-weight: normal;
      font-style: normal;
}

 Then introduce font.css in main.js

import '@/assets/font/font.css'

To use it on the page, just use font-family followed by the name you defined in font.css

 We have used these four effects respectively, so we can choose a good-looking one to introduce!