Font Face funktioniert in IIS 8.0 nicht

118

Ich habe ein Schriftbild in meinem Programm, das aus Font Squirrel generiert wurde. Ich kann es einfach nicht in IIS zum Laufen bringen, es funktioniert in localhost. Ich habe meinen MIME-Typen einen Anwendungs- / Font-Woff- Artikel hinzugefügt, aber er möchte immer noch nicht funktionieren.

Context
--Fonts
----font location
--css files

CSS

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

AKTUELLE MIME BEARBEITEN

Ich verwende die Standardschriftart IIS 8 MIME / x-woff

css iis fonts woff2 Joetinger
quelle
Wie rufst du es an? Haben Sie die Beispielausgabe im Font Squirrel-Zip ausprobiert?
Aibrean
Wenn Sie IIS 8 verwenden, sollten Sie in Ihrer Webkonfiguration für WOFF keinen MIME-Typ hinzufügen müssen. In der Tat wäre es wahrscheinlicher, ein Duplikat zu haben.
Colin Bacon
@ Aibrean ja die Beispielausgabe funktioniert
Joetinger
@ColinBacon Ich habe das gelesen, nachdem ich gepostet habe. Ich habe derzeit also font / x-woff, dies ist von IIS 8.0 geerbt. Aber immer noch kein Glück, die richtige Schriftart zu bekommen
Joetinger

Antworten:

259

Schön zu sehen, dass WOFF2 in Font Squirrel-Schriftarten enthalten ist! Während für IIS 8 kein MIME-Typ hinzugefügt WOFFwerden muss, wird für diesen ein MIME-Typ benötigt WOFF2. Das W3C empfiehlt :

application/font-woff2

Weitere Informationen finden WOFF2Sie hier .

Ändern Sie Ihren MIME-Typ in IIS Web.Configwie folgt , um ihn hinzuzufügen :

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>
Colin Bacon
quelle
2
Ich fügte hinzu, woff2aber immer noch nichts
Joetinger
4
Wenn Sie in Ihren Entwicklungswerkzeugen suchen. Erhalten Sie einen 404, wenn er versucht, die Schriftartdatei abzurufen? Überprüfen Sie daher, ob der Pfad korrekt ist und ob Sie die Berechtigung haben, ihn in Ihrem Browser zu durchsuchen.
Colin Bacon
Ja, http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2ich bin mir nicht sicher, woher sie den Bundles-Ordner beziehen. Irgendeine Idee?
Joetinger
4
Ich gehe davon aus, dass Sie die ASP.NET-Bündelung und -Minimierung verwenden. Wenn Sie dies in Ihrer Bundle-Konfiguration festlegen BundleTable.EnableOptimizations = true. Ihr lokaler Host sollte sich genauso verhalten wie auf Ihrem Produktionsserver.
Colin Bacon
1
Vielen Dank für all die Hilfe, die es jetzt funktioniert. Es war eine Kombination aus dem woff2und dem 404-Fehler, die zu einem Rechtschreibfehler in meinem Bundle führte. Danke dir!
Joetinger
79

Damit die Schriftarten woff und woff2 in IIS ordnungsgemäß funktionieren, sollten Sie der Datei Web.Config die folgenden MIME-Typen hinzufügen.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>  
  <system.webServer>    
    <staticContent>
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Wenn der Fehler 404 in Google Chrome weiterhin auftritt, sollten Sie den Browser-Cache leeren, bevor Sie die Seite neu laden.

Varun
quelle
2
Die Spezifikation empfiehlt jetzt mimeType für woff als application / font-woff .
Steven
2
Ich habe nur ein .woff2 404-Problem bekommen und das hat bei mir funktioniert. Ich habe nur die Zeilen verwendet, die sich auf woff2 beziehen
Francisc0
26

Beachten Sie, dass es auch möglich ist, MIME-Typen in IIS Manager zu konfigurieren. Wählen Sie einfach die Website aus und doppelklicken Sie im Hauptfenster unter IIS auf das Symbol MIME-Typen.

Geben Sie hier die Bildbeschreibung ein

Sie sollten dann eine Liste aller vorhandenen MIME-Typen anzeigen und über den Link Hinzufügen ... im rechten Bereich neue hinzufügen können.

Scott Munro
quelle
2
Warum nicht web.config verwenden? !!
Mojtaba Pourmirzaei
7
@ MojtabaPourmirzaei Weil nicht jeder ein Systemadministrator ist. Das ist der ganze Grund, warum IIS eine Benutzeroberfläche hat.
Alph.Dev
Wenn Sie eine Nicht-.NET-Website in IIS bereitstellen, müssen Sie dies auf diese Weise tun (z. B. eine Angular-App).
Jon Kruger
0

Ich hatte dieses Problem heute, als ich eine Metro4-UI-Symbole für eine Weblösung bereitstellte und vom CDN zur kompilierten Option wechselte.

Mein Projekt wurde mit der WebSharper-Plattform entwickelt, aber die Lösung ist trotzdem unabhängig von diesen Implementierungsdetails.

Kurz gesagt, ich habe festgestellt, dass ich die Dateierweiterung hinzufügen musste, z. B. .ttfinnerhalb des securityAbschnitts unter system.webServerdem Web.config.

<security>
    <requestFiltering>
        <fileExtensions>
            <add fileExtension=".ttf" allowed="true" />
        </fileExtensions>
    </requestFiltering>
</security>

Die gleiche Konfigurationsoption ist auch in den GUI-Einstellungen von IIS verfügbar

IIS-GUI

Giulio
quelle