vue项目导入谷歌字体包

实现导入谷歌字体

谷歌字体链接：http://www.googlefonts.cn/chinese

App.vue

<style>
  @import '/common/font/font.css';
</style>

main.js

import './common/font/font.css'

font.css

@font-face {  
  font-family: 'HanaleiFill-Regular'; 
  src: url('HanaleiFill-Regular.ttf');  
  font-weight: normal;  
  font-style: normal;  
}

ttf文件为从谷歌下载的字体第三方包

webpack.base.conf.js

{
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
      }
    }