icoMoon Fonts erscheinen nicht unter Firefox

Question

Haben Sie keine Probleme mit den Cross-Browsern mit den Icon-Ersatz-Fonts in Firefox, zeigen Sie zur Zeit nur den Inhaltstext, aber nicht den icomon Text-Ersatz an. Quellcode aus dem Code Sass + Magento + .htaccess, jede Idee oder Hilfe wäre sehr willkommen.

Website: http://www.phoebessecret.co.nz

Hatte .htaccess Rewrite getan:

AddType image/svg+xml svg svgz 
AddEncoding gzip svgz 
AddType application/vnd.ms-fontobject eot 
AddType font/truetype ttf 
AddType font/opentype otf 
AddType application/x-font-woff woff 

<FilesMatch ".(ttf|otf|eot|woff)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Origin "http://www.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://skin.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://js.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://media.phoebessecret.co.nz" 
</IfModule> 
</FilesMatch> 

CSS:

@font-face { 
font-family: 'topshops'; 
src:url('../fonts/topshops.eot'); 
src:url('../fonts/topshops.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/topshops.svg#topshops') format('svg'), 
    url('../fonts/topshops.woff') format('woff'), 
    url('../fonts/topshops.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal;} 

.icon-fonts { 
    font-family: 'topshops'; 
    font-style: normal; 
    speak: none; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    font-weight: 400; 
} 

.iconsearch { 
    content: "\61"; 
} 

Answer 1

Ich hatte Probleme mit icomoon und Firefox als w ell. Hast du versucht Paul Irish's 'bulletproof' @font-face syntax? Es ist etwas anders als das, was icomoon ausgibt, und ich hatte mehr Glück damit - seither gibt es keine FF-Probleme mehr.

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); 
} 

Answer 2

Versuchen Sie, dies zu Ihrer .htaccess-Datei hinzuzufügen. Es sollte Ihr Problem beheben. Es hat meinen behoben.

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

Answer 3

Ich hatte das gleiche Problem (mit einer Wordpress-Installation), icomoon Symbole wurden nicht in Firefox angezeigt. Chrome, Safari, IE hat gut funktioniert.

Nachdem die Site gestartet wurde, bat mich der Client, www zur URL hinzuzufügen, anstatt nur http: //. Also habe ich die Blog-Adresse geändert, aber nicht die WordPress-Adresse (im Wordpress-Dashboard). Plötzlich waren alle Icomoon Icons verschwunden. Nach dem Hinzufügen von www zur Wordpress-Adresse waren die Symbole wieder da.

Answer 4

Es gibt zwei Dinge, die Sie ausprobieren können. Ich habe beides benutzt und es hat für mich funktioniert. Verwenden Sie vollständige Links in Ihrer CSS-Datei, um auf icomoon zu verweisen. Ihr .htaccess könnte die URL neu schreiben. Zweitens fügen Sie die folgenden in .htaccess-Datei, wie gerade webkub hingewiesen.

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

Answer 5

Wenn Sie IIS laufen lassen, würden Sie wollen Ihre web.config ändern und wahrscheinlich den httpprotocol Abschnitt hinzufügen, wie unten dargestellt:

<?xml version="1.0" encoding="utf-8"?> 
    <configuration> 
    <system.webServer> 
     <httpProtocol> 
     <customHeaders> 
      <add name="Access-Control-Allow-Origin" value="*" /> 
     </customHeaders> 
    </httpProtocol> 
    </system.webServer> 
    </configuration>