Tipo MIME para fontes WOFF?

556

Que tipo de mímica deve ser usada as fontes WOFF?

Estou servindo fontes truetype (ttf) como font/truetypee opentype (otf) como font/opentype, mas não consigo encontrar o formato correto para as fontes WOFF.

Eu tentei font/woff, font/webopene font/webopentype, mas o Chrome ainda reclama:

"Recurso interpretado como fonte, mas transferido com o tipo MIME application / octet-stream."

Alguém sabe?

Nico Burns
fonte
1
Portanto, não há como parar o Chrome de reclamar?
quer
1
Aqui está a solução Node.js / Meteor: npm install mime
Eric Leroy
observe também a outra configuração que finalmente corrigiu meu problema no IIS stackoverflow.com/questions/12458444/…
Iman
1
font/woffagora é o tipo MIME correto para o woff e o Chrome não reclama.
Mikael Dúi Bolinder 7/11

Respostas:

737

Atualização do comentário de Keith Shaw em 22 de junho de 2017:

Em fevereiro de 2017, o RFC8081 é o padrão proposto. Ele define um tipo de mídia de nível superior para fontes, portanto, o tipo de mídia padrão para WOFF e WOFF2 é o seguinte:

font/woff

font/woff2


Em janeiro de 2011 , foi anunciado que, entretanto, o Chromium reconhecerá

application/x-font-woff

como o tipo MIME para WOFF. Eu sei que essa alteração está agora no Chrome beta e, se ainda não estiver estável, não deve estar muito longe.

Marcel
fonte
8
a partir do Chromium 18.0, 30/08/2012, precisa usar application / x-font-woff
cc young
6
Como cc young disse, para se livrar do aviso do Chrome "Recurso interpretado como fonte, mas transferido com o tipo MIME application / font-woff", você precisa usar "application / x-font-woff"
Jamie
9
A versão 24.0.1312.52 do Chrome ainda parece responder com o "Recurso interpretado como fonte, mas transferido ..." se você usar application / font-woff. Parece ainda precisar usar "application / x-font-woff" por enquanto.
Nicholi
4
De acordo com o seguinte commit do Webkit, font/woffe application/x-font-woffserá removido em favor de application/font-woff. Além disso, o aviso foi rebaixado para uma mensagem de log. trac.webkit.org/changeset/144763/trunk/Source/WebCore/inspector/...
Jorrit Schippers
6
E o novo .woff2?
The Muffin Man
135

Para mim, o próximo foi trabalhar em um arquivo .htaccess.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2   
joiggama
fonte
2
Não acredito que mais pessoas não acharam isso útil. Este é o único que funcionou para mim.
Tim Joyce
4
No momento da pergunta, 'font / woff' não funcionava. Alguém pode confirmar que agora o faz?
Nico Burns
5
No IIS Express, você pode adicionar um MimeMap elemento para web.config na configuração / system.webServer / staticContent:<mimeMap fileExtension=".woff" mimeType="font/woff" />
shovavnik
6
a partir do Chrome 18, parou de funcionar. agora application / x-font-woff parece funcionar.
Cc young
4
Para o registro, o Google Fonts usa font/woffe font/woff2.
usar o seguinte
55

Será application/font-woff.

consulte http://www.w3.org/TR/WOFF/#appendix-b (Recomendação do candidato do W3C em 04 de agosto de 2011)

e http://www.w3.org/2002/06/registering-mediatype.html

Do Mozilla css notas de fonte

No Gecko, as fontes da Web estão sujeitas à mesma restrição de domínio (os arquivos de fonte devem estar no mesmo domínio da página que os utiliza), a menos que controles de acesso HTTP sejam usados ​​para relaxar essa restrição. Nota: Como não há tipos MIME definidos para fontes TrueType, OpenType e WOFF, o tipo MIME do arquivo especificado não é considerado.

source: https://developer.mozilla.org/en/CSS/@font-face#Notes

jflaflamme
fonte
3
Mas, como apontado por Marcel depois, o Chromium reconhecerá application / x-font-woff de acordo com a RFC 2048 até que application / font-woff seja aceito.
jflaflamme
2
A especificação WOFF agora é uma recomendação e não mudará de application / font-woff w3.org/TR/WOFF/#appendix-b
Steve Workman
26

Referência para adicionar tipos de mímica de fonte ao .NET / IIS

via web.config

<system.webServer>
  <staticContent>
     <!-- remove first in case they are defined in IIS already, which would cause a runtime error -->
     <remove fileExtension=".woff" />
     <remove fileExtension=".woff2" />
     <mimeMap fileExtension=".woff" mimeType="font/woff" />
     <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

via Gerenciador do IIS

captura de tela da adição de tipos woff mime ao IIS

JeremyWeir
fonte
19

Em fevereiro de 2017, o RFC8081 é o padrão proposto. Ele define um tipo de mídia de nível superior para fontes, portanto, o tipo de mídia padrão para WOFF e WOFF2 é o seguinte:

font/woff
font/woff2
Keith Shaw
fonte
10

Nota: Esta resposta estava correta no momento, mas ficou desatualizada em 2017 quando o RFC 8081 foi lançado

Não há fonttipo MIME! Portanto, font/xxxSEMPRE está errado.

K. Rice
fonte
@UmarFarooqKhawaja, esta resposta está incompleta, mas não está errada. A única coisa que mudou entre esta resposta e seu comentário application/font-wofffoi adicionada ao padrão, substituindo itens como application/x-font-woff(a atualização real do software na prática é outra questão). Nada tornou válidos os tipos de conteúdo elaborados do formulário font/xxx.
Jon Hanna
5

Adicione o seguinte ao seu .htaccess

AddType font/woff woff

boa sorte

Nick321
fonte
4

@Nico ,

Atualmente, não há um padrão definido para o tipo de mímica da fonte woff. Eu uso um serviço cdn de entrega de fontes e ele usa font / woff e recebo o mesmo aviso no chrome.

Referência: Autoridade de Números Atribuídos à Internet

Chris_O
fonte
2

Eu sei que este post é meio antigo, mas depois de passar muitas horas tentando fazer as fontes funcionarem na minha máquina local nginx e tentando várias soluções, finalmente consegui a que funcionou para mim como um encanto.

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

Dentro dos parênteses, você pode colocar as extensões de suas fontes ou geralmente os arquivos que deseja carregar. Por exemplo, usei-o para fontes e imagens (png, jpg, etc, etc.) também, portanto, não se confunda que esta solução se aplica apenas a fontes.

Basta colocá-lo no seu arquivo de configuração nginx, reiniciar e espero que funcione também para você!

pr1nc3
fonte
1

Talvez isso ajude alguém. Vi que no IIS 7 .ttfjá é um tipo mime conhecido. Está configurado como:

application/octet-stream

Então, eu só acrescentou que, para todos os tipos de fonte CSS ( .oet, .svg, .ttf, .woff) e IIS começou a servi-los. As ferramentas de desenvolvimento do Chrome também não se queixam de reinterpretar o tipo.

Michael Cheers

Michael Kennedy
fonte
8
'application / octet-stream' é o servidor equivalente a dizer "Não sei o que é isso".
Synchro
1
Sim eu conheço. Mas o ponto principal foi que funcionou, enquanto muitas das opções mais específicas não pareciam resultar no uso das fontes no IIS7. Meu comentário foi mais pragmático do que tentar ser o mais correto (porque isso não estava funcionando).
27412 Michael Kennedy
1

Para toda a solução index.php, remova o URL do formulário e o arquivo woff permitido. para escrever o código abaixo no arquivo .htaccess e fazer essa alternância no arquivo application / config / config.php: $ config ['index_page'] = '';

Apenas para servidor de hospedagem Linux. Detalhes do arquivo .htaccess

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php
</IfModule>
Hussy Borad
fonte
0

O IIS definiu automaticamente .ttf como application / octet-stream, que parece funcionar bem, e a fontshop recomenda que .woff seja definido como application / octet-stream

needletooth
fonte
0

WOFF:

  1. Formato de fonte aberta da Web
  2. Pode ser compilado com contornos TrueType ou PostScript (CFF)
  3. Atualmente, é suportado pelo FireFox 3.6+

Tente adicionar isso:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
Adalarasan Sachithanantham
fonte
-1

Eu tive o mesmo problema, a fonte / opentype funcionou para mim

oshimin
fonte
OpenType não é para woff?
Mikael Dúi Bolinder 6/11/19
-1

O tipo MIME pode não ser o seu único problema. Se o arquivo da fonte estiver hospedado no S3 ou em outro domínio, você também pode ter o problema de o Firefox não carregar fontes de domínios diferentes. É uma solução fácil com o Apache, mas no Nginx, eu li que você pode precisar codificar seus arquivos de fonte na base-64 e incorporá-los diretamente no seu arquivo css de fonte.

Ringo
fonte