Failed to decode downloaded font. OTS parsing error. VueJs

Question

I am trying to import a web-font in a certain component in my Vue App (created with Vue cli webpack template). Inside the one of my components I try to import the fonts, by referencing a _fonts.scss within the project that has the contents:

@font-face {
  font-family: 'SomeFont';
  src: url('~/assets/fonts/SomeFont-Regular.woff2') format('woff2'),
  url('~/assets/fonts/SomeFont-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Then, when I open the app, I get this error:

Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff2
Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff

With this too:

OTS parsing error: invalid version tag
OTS parsing error: invalid version tag

I searched online for this problem and found nothing, or some relatable circumstances

Answer 1

Try to use relative path when importing fonts in url(). Without '~/fontPath'

Example

@font-face {
  font-family: 'MyFont';
  src: url("../assets/fonts/MyFont.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

Answer 2

I had the same problem and found the answer here Vue Cli 3 Local fonts not loading. In short, you have to replace ../assets with ~@/assets.