Why does the downloaded font fail to decode for glyphicons but after redirecting to another site and back,it shows?

I am using STS to develop a web app, and in my static directory I have a css folder where bootstrap files are, a font folder where the glyphicons fonts are and the Js folder.
I am using glyphicons on my first page and it only shows a sqare and this error :

Failed to decode downloaded font: http://localhost:8080/fonts/glyphicons-
halflings-regular.woff2
login:1 OTS parsing error: invalid version tag

for every font in the folder.
But once I click on a link to another site and then go back, the glyphicons show.When I open only the html files not on a server, the glyphicons show.

How do I fix this and show them when the app launches ? I checked the route within the bootstrap file and it shows correct, as I also have the same structure as bootstrap folder had.

Thank you for any help in advance.