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

— 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

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

— Giulio
fonte