Search code examples
cssdebuggingcompressionmimeglyphicons

Compressing css files causing glyphicon fonts to not render: Resources interpreted as Font but transferred with MIME type text/plain

I'm using glyphicon fonts. When bootstrap gets compressed and bundled with other css files, the icons stop rendering correctly (they show as empty squares), but when bootstrap isn't compressed the icons render correctly. When it's compressed, I get this message when I load my pages:

Resource interpreted as Font but transferred with MIME type text/plain: "/fonts/glyphicons-halflings-regular.woff"

for each glyphyicon font file (.woff, .ttf, .eot, .svg).

Why is compressing the css preventing these files from being interpreted correctly? How can I get the glyphicon fonts to render correctly when the css is compressed?

Solution

  • I solved it by moving my fonts folder to the root of my solution