Значок шрифта не работает в firefox

Question

Я пытаюсь использовать значок шрифта, пока он хорошо работает во всех браузерах, кроме firefox, я не понимаю, почему вместо значка он просто показывает значение, которое находится в атрибуте data-icon Can кто-нибудь объясняет, почему он не работает в firefox (последний)?

@font-face { 
    font-family: 'icon-font'; 
    src: url('//bit.ly/ZxomPz') format('woff'), 
     url('//bit.ly/WPGMJF') format('truetype'), 
     url('//bit.ly/16eqBwn') format('eot'), 
     url('//bit.ly/16eqLDZ') format('svg'); 
} 

[data-icon]::before { 
font-family: 'icon-font'; 
font-weight: 400 !important; 
content: attr(data-icon); 
text-transform: none; 
margin-right: 3px; 
position: relative; 
top: 8px; 
right: 5px; 
font-size: 31px; 
line-height: 0; 
} 

<span data-icon="1" aria-hidden="true"></span> 

Answer 1

Вот @ шрифта лицо декларация рекомендуется. Возможно, вы можете попробовать переписать свое письмо с этим примером.

@font-face { 
    font-family: 'Lobster13Regular'; 
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot'); 
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'), 
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.woff') format('woff'), 
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.ttf') format('truetype'), 
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg'); 
} 

Кроме того, сделать ваш сервер доставки правильный 'Мим-тип' (TTF | OTF | СРВ | Woff) и допускает доступ для внешних RESSOURCES (Access-Control-Allow-Origin "*")

Answer 2

Я знаю, что опаздываю на вечеринку, но вот решение, которое сработало для меня, и я не вижу его в ответах (кроме краткого упоминания стилей @Milky ways).

Создать .htaccess файл со следующей информацией и сохранить его в той же папке, ваши шрифты расположены:

<FilesMatch ".(ttf|otf|eot|woff)$"> 
    <IfModule mod_headers.c> 
     Header set Access-Control-Allow-Origin "*" 
    </IfModule> 
</FilesMatch> 

Более подробная информация здесь:

• Firefox потому, что Firefox не позволяет междоменные шрифты: http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/

• http://alittlecode.com/font-awesome-icons-not-working-in-firefox-probable-cause-and-a-fix/