Tipo MIME para fontes WOFF?

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?

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.

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   

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

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

SOLUÇÃO NGINX

Arquivo

/etc/nginx/mime.types

ou

/usr/local/nginx/conf/mime.types

adicionar

font/ttf                      ttf;
font/opentype                 otf;
font/woff                     woff;
font/woff2                    woff2;
application/vnd.ms-fontobject eot;

retirar

application/octet-stream        eot;

REFERÊNCIAS

RFC @ 02.2017

https://tools.ietf.org/html/rfc8081#page-15

https://www.iana.org/assignments/media-types/media-types.xhtml

Agradecimentos a Mike Fulcher

http://drawingablank.me/blog/font-mime-types-in-nginx.html

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

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.

O que fez por mim foi adicionar isso ao meu inicializador mime_types.rb:

Rack::Mime::MIME_TYPES['.woff'] = 'font/woff'

e limpe o cache

rake tmp:cache:clear

antes de reiniciar o servidor.

Fonte: https://github.com/sstephenson/sprockets/issues/366#issuecomment-9085509

Adicione o seguinte ao seu .htaccess

AddType font/woff woff

boa sorte

@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

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

Esta é uma lista útil de mimetipos

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ê!

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

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>

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

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

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

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.