Шрифты IE8 CSS @font-face работают только для содержимого :before поверх, а иногда и при обновлении/жестком обновлении

ОБНОВЛЕНИЕ: я написал сообщение в блоге о том, что я узнал. об этом вопросе. Я до сих пор не совсем понимаю, но надеюсь, что кто-нибудь прочитает это и прольет свет на мою проблему: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and- ie8

У меня есть страница, на которой я использую @font-face для импорта пользовательского шрифта для значков. Иконки создаются с помощью класса:

.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}

И вуаля, у меня есть любая иконка, используемая для "A". Довольно стандартная штука, работает во всех браузерах, включая IE8.

Однако в IE8 у меня есть странная ошибка. При загрузке страницы шрифт не работает. Вместо иконок у меня повсюду буквы. Когда я навожу курсор НАД страницей (телом), половина букв становится значками. Остальные становятся иконками, когда я навожу на них курсор.

ТАК, что шрифт встраивается правильно. Семейство шрифтов и свойства содержимого работают, но что-то еще заставляет значки загружаться только после наведения.

Итак, есть какая-то ошибка с @font-face в IE8, когда вы пытаетесь использовать шрифт с :before{content: 'a'}, но я понятия не имею, что это за ошибка.

Я часами искал здесь подобную ошибку/проблему с IE8/что угодно, но мне не повезло, и я собираюсь сойти с ума. Какие-либо предложения?

Дайте мне знать, если я могу предоставить дополнительную информацию, которая может оказаться полезной.

РЕДАКТИРОВАТЬ: обновлена ​​неработающая ссылка на сообщение в блоге.