How to Load a Font File in Vuejs and Webpack

How to load a font file in vuejs and webpack?

Hope this will help others who are facing the same issue. For some reason Vue.js is giving error when using .otf files. I used .woff and now everything works fine. Use the following code in your webpack.config.js file :

      module.exports = function (config, { isClient, isDev }) {
            module: { rules: [ { test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, 
            loader: 'file-loader' } ] }
            return config }

and import the files in your css file using something like this

 @font-face { 
       font-family: "Questrial";
       src: url("../../fonts/Questrial-Regular.ttf"); 
   }

Can't load font with webpack & vuejs

Okay I finaly found a way to use my customs fonts :

I had the correct syntax but I just had to use .woff or .woff2 font files instead of .ttf or .otf. I can't explain why it's not working anymore, but I got what I wanted so it's allright ~

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-line
import 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.

Cannot embed custom fonts using vuejs2 and webpack

Sorry this is solved it required ../src

---

Related Topics