So importieren Sie benutzerdefinierte Schriftart in allen Browsern

Question

Ich habe eine benutzerdefinierte Schriftart namens Roboto Condensed.

Ich habe alle Schriftarten in einen Schriftartenordner gelegt.

Ich habe ein eot, woff, woff2, ttf und svg alle hier für cyrilica, griechisch, vietnamesisch, und Latin zusammen mit Erweiterungen für Griechisch, Kyrillisch und Latein.

Ich versuche, sie in meine Seite wie diese zu importieren:

/* cyrillic-ext */ 
@font-face { 
    font-family: 'Roboto Condensed'; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Roboto Condensed Cyrillic Ext.eot"); 
    src: url("fonts/Roboto Condensed Cyrillic Ext.eot?#iefix") format('embedded-opentype'), 
     url("fonts/Roboto Condensed Cyrillic Ext.woff2") format('woff2'), 
     url("fonts/Roboto Condensed Cyrillic Ext.woff") format('woff'), 
     url("fonts/Roboto Condensed Cyrillic Ext.ttf") format('truetype'), 
     url("fonts/Roboto Condensed Cyrillic Ext.svg#svgFontName") format('svg'); 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
} 

/* cyrillic */ 
@font-face { 
    font-family: 'Roboto Condensed'; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Roboto Condensed Cyrillic.eot"); 
    src: url("fonts/Roboto Condensed Cyrillic.eot?#iefix") format('embedded-opentype'), 
     url("fonts/Roboto Condensed Cyrillic.woff2") format('woff2'), 
     url("fonts/Roboto Condensed Cyrillic.woff") format('woff'), 
     url("fonts/Roboto Condensed Cyrillic.ttf") format('truetype'), 
     url("fonts/Roboto Condensed Cyrillic.svg#svgFontName") format('svg'); 
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 
} 

/* greek-ext */ 
@font-face { 
    font-family: 'Roboto Condensed'; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Roboto Condensed Greek Ext.eot"); 
    src: url("fonts/Roboto Condensed Greek Ext.eot?#iefix") format('embedded-opentype'), 
     url("fonts/Roboto Condensed Greek Ext.woff2") format('woff2'), 
     url("fonts/Roboto Condensed Greek Ext.woff") format('woff'), 
     url("fonts/Roboto Condensed Greek Ext.ttf") format('truetype'), 
     url("fonts/Roboto Condensed Greek Ext.svg#svgFontName") format('svg'); 
    unicode-range: U+0370-03FF; 
} 

/* greek */ 
@font-face { 
    font-family: 'Roboto Condensed'; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Roboto Condensed Greek.eot"); 
    src: url("fonts/Roboto Condensed Greek.eot?#iefix") format('embedded-opentype'), 
     url("fonts/Roboto Condensed Greek.woff2") format('woff2'), 
     url("fonts/Roboto Condensed Greek.woff") format('woff'), 
     url("fonts/Roboto Condensed Greek.ttf") format('truetype'), 
     url("fonts/Roboto Condensed Greek.svg#svgFontName") format('svg'); 
    unicode-range: U+0370-03FF; 
} 


/* vietnamese */ 
@font-face { 
    font-family: 'Roboto Condensed'; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Roboto Condensed Vietnamese.eot"); 
    src: url("fonts/Roboto Condensed Vietnamese.eot?#iefix") format('embedded-opentype'), 
     url("fonts/Roboto Condensed Vietnamese.woff2") format('woff2'), 
     url("fonts/Roboto Condensed Vietnamese.woff") format('woff'), 
     url("fonts/Roboto Condensed Vietnamese.ttf") format('truetype'), 
     url("fonts/Roboto Condensed Vietnamese.svg#svgFontName") format('svg'); 
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 
} 


/* latin-ext */ 
@font-face { 
    font-family: 'Roboto Condensed'; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Roboto Condensed Latin Ext.eot"); 
    src: url("fonts/Roboto Condensed Latin Ext.eot?#iefix") format('embedded-opentype'), 
     url("fonts/Roboto Condensed Latin Ext.woff2") format('woff2'), 
     url("fonts/Roboto Condensed Latin Ext.woff") format('woff'), 
     url("fonts/Roboto Condensed Latin Ext.ttf") format('truetype'), 
     url("fonts/Roboto Condensed Latin Ext.svg#svgFontName") format('svg'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 


/* latin */ 
@font-face { 
    font-family: 'Roboto Condensed'; 
    font-style: normal; 
    font-weight: 300; 
    src: url("fonts/Roboto Condensed Latin.eot"); 
    src: url("fonts/Roboto Condensed Latin.eot?#iefix") format('embedded-opentype'), 
     url("fonts/Roboto Condensed Latin.woff2") format('woff2'), 
     url("fonts/Roboto Condensed Latin.woff") format('woff'), 
     url("fonts/Roboto Condensed Latin.ttf") format('truetype'), 
     url("fonts/Roboto Condensed Latin.svg#svgFontName") format('svg'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

Wenn ich die Seite zu laden und zu meinem Entwickler-Tools ich zwei 404-Fehler erhalten, sagen, es nicht .woff und .woff2 Dateien finden . Die Dateien sind da, richtig geschrieben, ich habe es vor der Veröffentlichung dreimal überprüft.

Mit Blick auf die Reihenfolge gehe ich davon aus, dass Chrome lädt ttf und andere Typen ignorieren, weil die benutzerdefinierte Schriftart lädt.

Mache ich etwas falsch? Wird das vielleicht erwartet?

Answer 1

Da Ihr Code korrekt ist, gehe ich davon aus, dass Sie sich unter einem IIS-Server befinden, also müssen Sie diese zwei fehlenden MIME-Typen erstellen.

erstellen Sie können entweder in:

• IIS7
• Plesk - (Wenn dies Ihr Admin Domain-Panel ist)
• Web.Config

So ein Standard Web.config für beide Mime-Typen wäre etwas in der Art:

<system.webServer> 
    <staticContent> 
    <!-- remove first in case they are defined in IIS already, which would cause a runtime error --> 
    <remove fileExtension=".woff" /> 
    <remove fileExtension=".woff2" /> 
    <mimeMap fileExtension=".woff" mimeType="font/woff" /> 
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" /> 
    </staticContent> 
</system.webServer>