Vue Cli 3 Local fonts not loading

Did you try

@font-face {font-family: 'OpenSans-Regular';src: url('~@/assets/fonts/OpenSans-Regular.eot');src: url('~@/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),     url('~@/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),     url('~@/assets/fonts/OpenSans-Regular.woff') format('font-woff'),     url('~@/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),     url('~@/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');font-weight: normal;font-style: normal;}

Works for me Vue CLI 3, no vue.config.js settings.

I'm loading my styles like this:

import Vue from 'vue';import router from './router';import store  from './store';// eslint-disable-next-lineimport styles from './scss/app.scss';import App from './App.vue';Vue.config.productionTip = false;new Vue({    router,    store,    render: h => h(App)}).$mount('#app');

Not sure if that is good practice.

What I ended up doing was moving to a file loader method to get the fonts to package over and set the the public path.

vue.config.js

module.exports = {  assetsDir: 'assets/',  publicPath: '/', // Base directory for dev  css: {    sourceMap: true,    loaderOptions: {      sass: {        data: `@import "@/styles/main.scss";`      }    }  },  chainWebpack: config => {    config.module      .rule("fonts")      .test(/\.(ttf|otf|eot|woff|woff2)$/)      .use("file-loader")        .loader("file-loader")        .tap(options => {          options = {            // limit: 10000,            name: '/assets/fonts/[name].[ext]',          }          return options        })        .end()  }};

File-loader doesn't see the files unless called in the js so I imported them in main.js The console log is to navigate around the linter flagging unused imports

// Fonts need to be called in js for webpack to see and copy overimport OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';console.log(OpenSansReg, OpenSansBold, OpenSansLight);

then in one of my scss files

@font-face {    font-family: 'OpenSans-Regular';    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),         url('/assets/fonts/OpenSans-Regular.otf') format('opentype'),         url('/assets/fonts/OpenSans-Regular.woff') format('woff'),         url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');    font-weight: normal;    font-style: normal;}

For me, I just took out that 'format()' thing and works... Finally..