Font Face ne fonctionne pas dans IIS 8.0

118

J'ai un font-face dans mon programme généré à partir de Font Squirrel Je ne peux tout simplement pas le faire fonctionner dans IIS, cela fonctionne dans localhost. J'ai ajouté l' application / font-woff article à mes types MIME mais il ne veut toujours pas au travail.

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;
}

MODIFIER LE MIME ACTUEL

J'utilise la police IIS 8 MIME par défaut / x-woff

css iis fonts woff2 Joetinger
la source
Comment l'appelez-vous? Avez-vous essayé la sortie d'exemple dans le zip Font Squirrel?
Aibrean
Si vous utilisez IIS 8, vous ne devriez pas avoir à ajouter un type mime dans votre configuration Web pour WOFF. En fait, ce serait une erreur plus probable d'avoir un double.
Colin Bacon du
@Aibrean oui la sortie de l'échantillon fonctionne
joetinger
@ColinBacon J'ai lu ça après avoir posté. Donc j'ai actuellement font / x-woff, ceci est hérité d'IIS 8.0. Mais toujours pas de chance pour obtenir la bonne police
joetinger

Réponses:

259

Super de voir WOFF2 inclus dans les polices Font Squirrel! Bien que IIS 8 n'ait pas besoin d'un type mime ajouté, WOFFil en aura besoin pour WOFF2. Le W3C recommande :

application/font-woff2

Pour plus d'informations, WOFF2voir ici .

Pour ajouter le type mime dans IIS, modifiez votre Web.Configcomme suit:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>
Colin Bacon
la source
2
J'ai ajouté woff2mais toujours rien
joetinger
4
Si vous regardez dans vos outils de développement. Obtenez-vous un 404 lorsqu'il essaie d'obtenir le fichier de police? Vérifiez que le chemin est correct et que vous disposez des autorisations nécessaires pour y accéder dans votre navigateur.
Colin Bacon
Oui, http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2je ne suis pas sûr d'où ils obtiennent le dossier bundles. Une idée?
joetinger
4
Je suppose que vous utilisez le regroupement et la minification ASP.NET. Si vous définissez ceci dans votre configuration de bundle BundleTable.EnableOptimizations = true. Votre hôte local doit se comporter de la même manière que sur votre serveur de production.
Colin Bacon
1
Merci pour toute l'aide qu'il fonctionne maintenant. C'était une combinaison de l' woff2erreur et de l'erreur 404, qui a fini par être une faute d'orthographe dans mon paquet. Je vous remercie!
joetinger le
79

Pour que les polices woff et woff2 fonctionnent correctement dans IIS, vous devez ajouter les types MIME suivants au fichier Web.Config.

<?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>

Si vous rencontrez toujours l'erreur 404 sur Google Chrome, vous devez vider le cache de votre navigateur avant de recharger la page.

Varun
la source
2
La spécification recommande maintenant que mimeType pour woff soit application / font-woff .
Steven
2
Je n'obtenais qu'un problème .woff2 404 et cela a fonctionné pour moi. Je n'ai utilisé que les lignes relatives à woff2
Francisc0
26

Notez qu'il est également possible de configurer des types MIME dans IIS Manager. Sélectionnez simplement le site Web, puis double-cliquez sur l'icône Types MIME sous IIS dans le volet principal.

entrez la description de l'image ici

Vous devriez alors voir une liste de tous les types MIME existants et pouvoir en ajouter de nouveaux en utilisant le lien Ajouter ... dans le volet droit.

Scott Munro
la source
2
pourquoi ne pas utiliser web.config,? !!
Mojtaba Pourmirzaei
7
@MojtabaPourmirzaei Parce que tout le monde n'est pas administrateur système. C'est la raison pour laquelle IIS a une interface utilisateur.
Alph.Dev
Si vous déployez un site Web non-.NET dans IIS, vous devez le faire de cette façon (par exemple, une application Angular).
Jon Kruger
0

J'avais ce problème aujourd'hui lors du déploiement d'une icône d'interface utilisateur Metro4 de solution Web et du passage du CDN à l'option Compilé.

Mon projet a été développé avec la plateforme WebSharper, mais la solution est de toute façon indépendante de ces détails d'implémentation.

Pour faire court, j'ai découvert que je devais ajouter l'extension de fichier, par exemple pour .ttf, à l'intérieur de la securitysection sous system.webServerle Web.config.

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

La même option de configuration est également disponible dans les paramètres d'interface graphique d'IIS

IIS GUI

Giulio
la source