在项目中引入新字体，我的环境是vue+webpack其它环境操作应该差不多
1、下载需要的字体文件，我这里需要的是Let'sgo Digital Regular字体，下载压缩包里面只有一个.ttf文件，如果要兼容IE浏览器还需要IE专用文件，推荐在线转换网站https://www.fontsquirrel.com/tools/webfont-generator
上传压缩包里的ttf文件，下载下来的压缩包里有需要的.woff文件，也有相关的使用方法的css和HTML文件。
它的stylesheet.css文件里就有在项目中使用字体的方法
我自己项目里使用方法如下：
APP.vue文件里<style></style>下加入
@font-face {
font-family: font_num;//给字体命名
src: url("common/fonts/Let'sgo Digital Regular.ttf") format("truetype"),
url("common/fonts/lets_go_digital_regular-webfont.woff2") format("woff"),
url("common/fonts/lets_go_digital_regular-webfont.woff") format("woff");
font-weight: normal;
}
这样在使用时直接用font-family:字体名就可使用
.counts-item span{font-family:font_num; }经测试：IE10、11 Chrome Firefox都能正常显示该字体
文章来源: 在项目中引入新字体