Jeg gjør assets pre-compile, og kjører applikasjonen i produksjonsmodus. Etter kompilering når jeg laster inn indekssiden min, fikk jeg følgende advarsler i Chrome-konsollen:
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Problemet er at det ikke lastes inn ikoner i stedet for at det vises firkanter .
vi brukte de tilpassede skriftene og koden er:
@font-face {
font-family: 'icomoon';
src: font-url('icomoon.eot');
src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
font-url('icomoon.ttf') format('truetype'),
font-url('icomoon.woff') format('woff'),
font-url('icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Jeg vet ikke hva som mangler fra min ende. Jeg søkte mye og prøvde også løsning, men fikk ingen suksess. I utviklingsmodus fungerer det bra, men vet ikke hvorfor det vises firkantet i produksjonsmodus.
Jeg fikk nøyaktig samme feil, og i mitt tilfelle viste det seg å være på grunn av feil sti for @font-face
deklarasjonen. Webinspektøren klaget aldri med en 404 siden utviklingsserveren vi bruker (live-server) var konfigurert til å vise standard index.html ved alle 404:er. Uten å vite noen detaljer om oppsettet ditt, kan dette være en sannsynlig årsak.
Hvis du kjører på IIS som server og .net 4/4.5, kan det være at det mangler mime-/filutvidelsesdefinisjoner i Web.config - som dette:
<system.webServer>
<staticContent>
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>