Strange @font-face issue in IE11 (renders only after you inspect an element in developer tools)

css, font-face, internet-explorer-11

Solution

Turns out I had a blank font-family declaration on the body tag. I must have forgotten to remove it when I was making some changes. Removing the blank "font-family: ;" fixed the issue.

Problem

I have some web fonts that work correctly in all browsers except IE11. The strange thing is, if you go to this page: http://cscart.create26.com/index.php?dispatch=products.view&product_id=179 and then inspect the "features" bullet points with IE11 developer tools, suddenly all the fonts work. Any ideas? ``` @font-face { font-family: 'Helvetica-Condensed-Black'; src: url('../media/fonts/helvetica-condensed-black-webfont.eot'); src: url('../media/fonts/helvetica-condensed-black-webfont.eot?#iefix') format('embedded-opentype'), url('../media/fonts/helvetica-condensed-black-webfont.woff') format('woff'), url('../media/fonts/helvetica-condensed-black-webfont.ttf') format('truetype'), url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'Helvetica-Condensed-Black'; src: url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg'); } } ```

Original source