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

Solution 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;
  }

Solution 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.

Comments

[katerlouis]

But why does this help?!

[GeorgicaFaraFrica]

This is the correct answer from the hundreds of answers here on SO. Paths are the number one problem when working with fonts. I'm building a VueJS app in VSC and all I did was to change /src/assets/fonts/icomoon.eot?uoqhn7 to ../src/assets/fonts/icomoon.eot?uoqhn7 and it worked. I have no idea why. Vue has some 'issues' with relative paths. For example: in the same file img src="@/assets/images/image.png" will work, but src: url("@/assets/fonts/icomoon.eot?uoqhn7"); will not.