0

I'm using bootstrap-icons in my VueJS app. After loading the page, these errors appeared

Failed to decode downloaded font

OTS parsing error: invalid sfntVersion: 1008813135

for bootstrap-icons' .woff and .woff2 fonts.

Here is the font loading part in the bootstrap-icons.css file:

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d") 
  format("woff2"),
  url("./fonts/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}

Here is the import for bootstrap in my css file:

// Bootstrap
@import 'bootstrap';
@import '~bootstrap-icons/font/bootstrap-icons';

This error also happens on my production server, but with Font-Awesome, which working fine on my dev server.

Can you suggest any way to fix this, or where the source of the problem might be? I've searched the whole internet but still don't have any clue.

Brother Eye
  • 689
  • 1
  • 11
  • 27

2 Answers2

2

I've found the issue. It was my public folder that did not contain the fonts with the right path. I added the fonts to the folder with the path as specified in the error and all things works now.

P/S: This might be a temporary workaround, for if there are multiple icon packs and each requires a different font path, the build folder might get overloaded with tons of fonts folder. Would any one suggest a way to manage this problem?

Brother Eye
  • 689
  • 1
  • 11
  • 27
1

I do not exactly know the solution to your problem but I did a little research and found this Link

There are numerous solutions on it, I hope one of those might help you.

Asad Ullah Khalid
  • 140
  • 1
  • 3
  • 13