Quando você começa a trabalhar com CSS3 logo descobre que pode ir muito além da “verdana” e “arial”. Para quem, como eu, gosta de trabalhar com design isso é um sonho. Nós podemos criar layouts usando a boa é velha ‘Helvetica Condensed’ ou a ‘Futura Book’. O problema é que existem algumas pegadinhas que podem pegar os desavisados e criar alguma dor de cabeça.

Vamos analisar uma declaração de @font-face simples.

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

A raíz de todos os problemas está nas “inusitadas” extensões de arquivos que precisamos usar para garantir o funcionando da fonte em vários browsers e estas extensões normalmente não fazem parte da lista de “MimeTypes” autorizada pelo servidor fazendo com que a fonte não seja interpretada.

woff-404

A maneira mais simples de resolver isso é adicionando as extensões à lista pelo próprio IIS.

MimeTypes

  1. Acesse o site padrão do IIS.
  2. Vá na opção MimeTypes (ou Tipos de Mime, pois é… meu windows é em português.)
  3. Clique com o botão direito para abrir o recurso.
  4. Então precisa apenas clicar em “Adicionar”.

Você verá uma lista como está:

mimetype-list

No meu caso, a fonte que deu problema foi a “.woff”. Então vou adicionaro MimeType dela, que no caso é:

add-mimetype-2

Porém, você pode ter problemas com outras… segue uma lista bem útil de MimeTypes:

  • .ttf — font/truetype
  • .otf — font/opentype
  • .eot — application/vnd.ms-fontobject
  • .woff — application/x-font-woff

Se estiver usando o Apache pode usar esta lista:

  • AddType font/truetype ttf
  • AddType font/opentype otf
  • AddType application/vnd.ms-fontobject eot
  • AddType application/x-font-woff woff

Solução via web.config

Quando estamos trabalhando localmente é fácil adicionar diretamente no IIS, mas no contexto de servidores compartilhados… onde muitas vezes mal temos acesso a um painel de controle online, é muito importante conhecer a opção de adicionar esses MimeTypes através do próprio web.config da aplicação. E assim economizar horas esperando a resposta de um “ticket de suporte” no SAC do seu provedor.

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  </staticContent>
</system.webServer>

Pronto!

Dica complementar – Resolvendo “warnings”

Alguns navegadores, como o Google Chrome, podem acabar exibindo avisos como este:

Resource interpreted as Font but transferred with MIME type

Isso acontece quando o MimeType existe na lista do servidor, porém pode estar associado erroneamente. Por isso é muito importante conferir os tipos corretos para cada extensão de arquivo ao invés de usar soluções genéricas… afinal, é sempre muito melhor trabalhar com o console “limpinho”.

Um abraço e não deixem de comentar.