embedded fonts - otf - ¿Mime tipo de fuentes WOFF?

include fonts

Question

¿A qué tipo de mimo se deben servir las fuentes WOFF?

Estoy sirviendo fuentes TrueType (ttf) como font/truetype Truetype y Opentype (otf) como font/opentype , pero no puedo encontrar el formato correcto para las fuentes WOFF.

He probado font/woff , font/webopen , y font/webopentype , pero Chrome todavía se queja:

"Recurso interpretado como fuente pero transferido con la aplicación de tipo MIME / octet-stream".

Alguien sabe?

Answer 1

A partir de febrero de 2017, RFC8081 es el estándar propuesto. Define un tipo de medio de nivel superior para fuentes, por lo tanto, el tipo de medio estándar para WOFF y WOFF2 son los siguientes:

font/woff
font/woff2

Answer 2

Agregue lo siguiente a su .htaccess

AddType application/x-font-woff woff

buena suerte

Answer 3

El tipo Mime podría no ser tu único problema. Si el archivo de fuente está alojado en S3 u otro dominio, es posible que también tenga el problema de que Firefox no cargará las fuentes de diferentes dominios. Es una solución fácil con Apache, pero en Nginx, he leído que es posible que necesite codificar sus archivos de fuentes en base-64 e incrustarlos directamente en su archivo fuente css.

Answer 4

He tenido el mismo problema, fuente / opentype trabajado para mí

Answer 5

IIS definió automáticamente .ttf como application / octet-stream que parece funcionar bien y fontshop recomienda que .woff se defina como application / octet-stream

Answer 6

Lo que lo hizo por mí fue agregar esto a mi inicializador mime_types.rb:

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

y borra el caché

rake tmp:cache:clear

antes de reiniciar el servidor.

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

Answer 7

No hay font tipo MIME! Por lo tanto, la font/xxx SIEMPRE es incorrecta.

Answer 8

Para mí, el siguiente ha estado trabajando en un archivo .htaccess.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2   

Answer 9

Referencia para agregar tipos mime de fuentes a .NET / IIS

a través de 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="application/font-woff" />
     <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
  </staticContent>
</system.webServer>

a través del Administrador de IIS

Answer 10

Sé que esta publicación es un poco antigua, pero después de pasar muchas horas tratando de hacer que las fuentes funcionen en mi máquina local nginx y de probar un montón de soluciones, finalmente obtuve la que me funcionó como un encanto.

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

Dentro del paréntesis puede colocar las extensiones de sus fuentes o generalmente los archivos que desea cargar. Por ejemplo, lo utilicé para fuentes y para imágenes (png, jpg, etc.), así que no se confunda de que esta solución solo se aplica a las fuentes.

Simplemente póngalo en su archivo de configuración nginx, reinicie y espero que funcione también para usted.

Answer 11

Será la application/font-woff .

consulte application/font-woff (Recomendación del candidato del W3C 04 de agosto de 2011)

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

Desde Mozilla css font-face notes

En Gecko, las fuentes web están sujetas a la misma restricción de dominio (los archivos de fuente deben estar en el mismo dominio que la página que los usa), a menos que se usen controles de acceso HTTP para relajar esta restricción. Nota: como no hay tipos MIME definidos para las fuentes TrueType, OpenType y WOFF, no se considera el tipo MIME del archivo especificado.

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

Answer 12

Tal vez esto ayude a alguien. Vi que en IIS 7 .ttf ya es un tipo mime conocido. Se configura como:

application/octet-stream

Así que acabo de agregar que para todos los tipos de fuente CSS ( .oet , .oet , .ttf , .woff ) e IIS comenzó a servirlos. Las herramientas de desarrollo de Chrome tampoco se quejan de la reinterpretación del tipo.

Saludos, Michael

Answer 13

WOFF:

1. Formato de fuente abierta web
2. Se puede compilar con contornos TrueType o PostScript (CFF)
3. Actualmente es compatible con FireFox 3.6+

Intenta agregar eso:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

Answer 14

Actualización del comentario de Keith Shaw el 22 de junio de 2017:

A partir de febrero de 2017, RFC8081 es el estándar propuesto. Define un tipo de medio de nivel superior para fuentes, por lo tanto, el tipo de medio estándar para WOFF y WOFF2 son los siguientes:

font/woff

font/woff2

En enero de 2011 se anunció que mientras tanto Chromium reconocerá

application/x-font-woff

como el tipo mime para WOFF. Sé que este cambio está ahora en Chrome beta y, si aún no está estable, no debería estar muy lejos.

Answer 15

@Nico ,

Actualmente no hay un estándar definido para el tipo de mime de fuente woff. Utilizo un servicio de entrega de cdn de fuentes y usa font / woff y recibo la misma advertencia en Chrome.

Referencia: La Autoridad de Números Asignados de Internet

Answer 16

Para todas las soluciones index.php, eliminar la url de formulario y el archivo woff permitido. para escribir debajo del código en el archivo .htaccess y haga esta alternancia a su aplicación / config / config.php: $ config [''index_page''] = '''';

Solo para servidor de alojamiento Linux. Detalles del archivo .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>

Answer 17

SOLUCIÓN NGINX

expediente

/etc/nginx/mime.types

o

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

añadir

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

retirar

application/octet-stream        eot;

Referencias

RFC @ 02.2017

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

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

Gracias a Mike Fulcher

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