Font Face não está funcionando no IIS 8.0

118

Eu tenho uma face de fonte em meu programa gerada a partir do Font Squirrel, mas não consigo fazê-la funcionar no IIS, ela funciona no localhost. Eu adicionei application / font-woff artigo aos meus tipos MIME, mas ainda não quer trabalhar.

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

EDITAR MIME ATUAL

Estou usando a fonte MIME padrão do IIS 8 / x-woff

css iis fonts woff2 joetinger
fonte
Como você está ligando? Você tentou a saída de amostra no zip Font Squirrel?
Aibrean
Se estiver usando o IIS 8, não será necessário adicionar um tipo MIME na configuração da web para WOFF. Na verdade, seria mais provável um erro por ter uma duplicata.
Colin Bacon
@Aibrean, sim, o exemplo de saída funciona
joetinger
@ColinBacon Eu li isso depois de postar. Então, atualmente tenho font / x-woff, que é herdado do IIS 8.0. Mas ainda sem sorte em obter a fonte correta
joetinger

Respostas:

259

Ótimo ver WOFF2 sendo incluído em fontes Font Squirrel! Embora o IIS 8 não precise de um tipo MIME adicionado, WOFFele precisará de um para WOFF2. O W3C recomenda :

application/font-woff2

Para mais informações WOFF2veja aqui .

Para adicionar o tipo MIME no IIS, modifique o seu da Web.Configseguinte maneira:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>
Bacon Colin
fonte
2
Eu adicionei, woff2mas ainda nada
joetinger
4
Se você olhar em suas ferramentas de desenvolvimento. Você está recebendo um 404 quando tenta obter o arquivo de fonte? Verifique se o caminho está correto e se você tem permissão para navegar até ele no seu navegador.
Colin Bacon
Sim, mas não http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2tenho certeza de onde eles estão obtendo a pasta de bundles. Qualquer ideia?
joetinger
4
Presumo que você esteja usando agrupamento e minificação ASP.NET. Se você definir isso na configuração do seu pacote BundleTable.EnableOptimizations = true. Seu host local deve se comportar da mesma forma que em seu servidor de produção.
Colin Bacon de
1
Obrigado por toda a ajuda agora está funcionando. Era uma combinação do woff2e do erro 404, que acabou sendo um erro de ortografia no meu pacote. Obrigado!
joetinger de
79

Para fazer as fontes woff e woff2 funcionarem corretamente no IIS, você deve adicionar os seguintes tipos de MIME ao arquivo 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>

Se você ainda encontrar o erro 404 no Google Chrome, deve limpar o cache do navegador antes de recarregar a página.

Varun
fonte
2
A especificação agora recomenda mimeType para woff como application / font-woff .
Steven
2
Eu estava recebendo apenas um problema .woff2 404 e isso funcionou para mim. Usei apenas as linhas pertencentes a woff2
Francisc0
26

Observe que também é possível configurar tipos MIME no Gerenciador do IIS. Basta selecionar o site e clicar duas vezes no ícone Tipos de MIME no IIS no painel principal.

insira a descrição da imagem aqui

Você deve ver uma lista de todos os tipos de MIME existentes e ser capaz de adicionar novos usando o link Adicionar ... no painel direito.

Scott Munro
fonte
2
por que não usar web.config,? !!
Mojtaba Pourmirzaei
7
@MojtabaPourmirzaei Porque nem todo mundo é um administrador de sistema. Essa é a razão pela qual o IIS tem IU.
Alph.Dev
Se você estiver implantando um site não .NET no IIS, precisará fazer isso desta forma (por exemplo, um aplicativo Angular).
Jon Kruger
0

Eu estava tendo esse problema hoje ao implantar uma solução da Web Metro4 UI icons e mudar da opção CDN para a Compiled.

Meu projeto foi desenvolvido usando a plataforma WebSharper, mas a solução é independente desses detalhes de implementação.

Resumindo, descobri que tive que adicionar a extensão do arquivo, por exemplo .ttf, para , dentro da securityseção sob o system.webServerdo Web.config.

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

A mesma opção de configuração também está disponível nas configurações da GUI do IIS

GUI IIS

Giulio
fonte