Search code examples
vue.jswebpacksassfontsfont-face

Failed to decode downloaded font. OTS parsing error. VueJs

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

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