How to introduce fonts in vue

1. Why introduce fonts?
In front-end development, choosing appropriate fonts will often greatly improve the visual experience of the website. However, the types and styles of default fonts in web pages are limited, and the rendering effects are different on different devices and browsers. Therefore, many developers choose custom fonts to improve user experience.

2. How to introduce fonts

1. Search and download the font you need: https://www.dafont.com/theme.php

2. Create a font folder under the src/assets folder under the vue project, put in the fonts you need and create a new font.css 

 

3.Write the following code into font.css

@font-face {
    font-family:"MyFont"; //自定义字体名称
    src: url('./micross.ttf'); //引入字体路径
    font-weight: normal; //字体粗细
    font-style: normal;//字体风格
}

4.Introduce the css file just created into main.js

// 引入字体样式
import "@/assets/font/font.css"

5. Use fonts on your page