javascript - How to load a font file in vuejs and webpack? - Stack Overflow

admin管理员组

文章数量:1201982

I did a lot of reading but none of the links show me exactly how to add fonts in vuejs. This is how I import the font in my less file.

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

@font-face {
  font-family: "Galano_Grotesque_extra_Bold";
  src: url("../../fonts/Galano_Grotesque_Bold.otf");
}

@font-face {
  font-family: "Galano_Grotesque_Bold";
  src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}

This is the error that i get

ERROR in ./src/themes/jatango-theme/components/fonts/Galano_Grotesque_Bold.otf 1:4 Module parse failed: Unexpected character '' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

I am a newbie to VUEJS with no previous knowledge of react or angular. I only know jquery and javascript. So please someone give me a step by step guide to include the fonts. Thanks in advance :)

I did a lot of reading but none of the links show me exactly how to add fonts in vuejs. This is how I import the font in my less file.

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

@font-face {
  font-family: "Galano_Grotesque_extra_Bold";
  src: url("../../fonts/Galano_Grotesque_Bold.otf");
}

@font-face {
  font-family: "Galano_Grotesque_Bold";
  src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}

This is the error that i get

ERROR in ./src/themes/jatango-theme/components/fonts/Galano_Grotesque_Bold.otf 1:4 Module parse failed: Unexpected character '' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

I am a newbie to VUEJS with no previous knowledge of react or angular. I only know jquery and javascript. So please someone give me a step by step guide to include the fonts. Thanks in advance :)

• javascript
• vue.js
• webpack
• vuejs2
• less

Share Improve this question Follow edited Aug 10, 2019 at 12:29 Boussadjra Brahim 1 asked Oct 15, 2018 at 9:10 RajRaj 41511 gold badge55 silver badges1616 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 7

Put your fonts in the public/fonts/ folder. In css or scss, specify the path starting with /fonts/.

Example scss:

$font-dir: "/fonts/";

@font-face {
  font-family: "NameFont";
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot");
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot?#iefix")format("embedded-opentype"),
  url("#{$font-dir}NameFontRegular/NameFontRegular.woff") format("woff"),
  url("#{$font-dir}NameFontRegular/NameFontRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

Next, import your scss into main.js

Example:

// eslint-disable-next-line
import styles from './assets/scss/main.scss';

---

or in vue.config.js

Example:

module.exports = {
...
  css: {
    modules: true,
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      },
      sass: {
        data: '@import "~@/assets/scss/import/_variables.scss"; @import "~@/assets/scss/import/_mixins.scss";'
      },
    },
  },
...
}

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"); 
   }

It's a webpack error. You are missing a webpack loader to manage font files. Usually I use file-loader for fonts:

{
  test: /\.(ttf|otf|eot|woff|woff2)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "fonts/[name].[ext]",
    },
  },
}

Add this code in your webpack config file (module > rules section) or if you're using vue-cli 3, in your vue.config.js file (configurewebpack section).

本文标签： javascriptHow to load a font file in vuejs and webpackStack Overflow