title: How to load a font file in vuejs and webpack?
body: <p>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.</p>
  
  <pre><code>@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");
  }
  </code></pre>
  
  <p>This is the error that i get</p>
  
  <blockquote>
    <p>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)</p>
  </blockquote>
  
  <p>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 :)</p>
  
  <p><img src="https://i.stack.imgur.com/JOnmz.png" alt="folder-structure"></p>
  
  <p><img src="https://i.stack.imgur.com/vOaRT.png" alt="Folder-structure"></p>