program tip

WOFF 글꼴의 MIME 유형?

radiobox 2020. 10. 4. 10:48
반응형

WOFF 글꼴의 MIME 유형?


WOFF 글꼴은 어떤 MIME 유형으로 제공되어야합니까?

트루 타입 (ttf) 글꼴을으로 제공 font/truetype하고 오픈 타입 ( otf)을으로 제공 font/opentype하고 있지만 WOFF 글꼴에 대한 올바른 형식을 찾을 수 없습니다.

나는 시도 font/woff, font/webopen그리고 font/webopentype하지만, 크롬은 여전히 불평 :

"리소스는 글꼴로 해석되지만 MIME 유형 application / octet-stream으로 전송되었습니다."

아는 사람 있어요?


2017 년 6 월 22 일 Keith Shaw의 의견 업데이트 :

2017 년 2 월 현재 RFC8081 이 제안 된 표준입니다. 글꼴에 대한 최상위 미디어 유형을 정의하므로 WOFF 및 WOFF2의 표준 미디어 유형은 다음과 같습니다.

font/woff

font/woff2


2011 년 1 월 이 발표 된 그 동안 크롬이 인식 할 수

application/x-font-woff

WOFF의 MIME 유형으로. 이 변경 사항은 현재 Chrome 베타 버전이며 아직 안정적이지 않은 경우 너무 멀지 않아야합니다.


나를 위해, 다음은 .htaccess 파일에서 작업하는 것을 보았습니다.

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

그것은 될 것 application/font-woff입니다.

참조 http://www.w3.org/TR/WOFF/#appendix-b를 (2011.08.18 W3C 후보 추천 04)

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

Mozilla css 글꼴 메모에서

Gecko에서 웹 글꼴은 HTTP 액세스 제어를 사용하여이 제한을 완화하지 않는 한 동일한 도메인 제한 (글꼴 파일을 사용하는 페이지와 동일한 도메인에 있어야 함)이 적용됩니다. 참고 : TrueType, OpenType 및 WOFF 글꼴에 대해 정의 된 MIME 유형이 없기 때문에 지정된 파일의 MIME 유형은 고려되지 않습니다.

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


.NET / IIS에 글꼴 MIME 유형을 추가하기위한 참조

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>

IIS 관리자를 통해

IIS에 woff mime 유형을 추가하는 스크린 샷


NGINX 솔루션

파일

/etc/nginx/mime.types

또는

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

더하다

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

풀다

application/octet-stream        eot;

참고 문헌

RFC @ 02.2017

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

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

Mike Fulcher 덕분에

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


2017 년 2 월 현재 RFC8081 이 제안 된 표준입니다. 글꼴에 대한 최상위 미디어 유형을 정의하므로 WOFF 및 WOFF2의 표준 미디어 유형은 다음과 같습니다.

font/woff
font/woff2

fontMIME 유형 이 없습니다 ! 따라서 font/xxx항상 잘못되었습니다.


나를 위해 한 일은 mime_types.rb 이니셜 라이저에 이것을 추가하는 것입니다.

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

캐시를 닦아

rake tmp:cache:clear

서버를 다시 시작하기 전에.

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


Add the following to your .htaccess

AddType font/woff woff

good luck


@Nico,

Currently there is no defined standard for the woff font mime type. I use a font delivery cdn service and it uses font/woff and I get the same warning in chrome.

Reference: The Internet Assigned Numbers Authority


Maybe this will help someone. I saw that on IIS 7 .ttf is already a known mime-type. It's configured as:

application/octet-stream

So I just added that for all the CSS font types (.oet, .svg, .ttf, .woff) and IIS started serving them. Chrome dev tools also do not complain about re-interpreting the type.

Cheers, Michael


I know this post is kind of old but after spending many hours on trying to make the fonts work on my nginx local machine and trying a tons of solutions i finally got the one that worked for me like a charm.

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

Inside the parenthesis you can put the extensions of your fonts or generally the files that you want to load. For example i used it for fonts and for images(png,jpg etc etc) as well so don't get confused that this solution applies only for fonts.

Just put it into your nginx config file, restart and i hope it works also for you!


IIS automatically defined .ttf as application/octet-stream which seems to work fine and fontshop recommends .woff to be defined as application/octet-stream


WOFF:

  1. Web Open Font Format
  2. It can be compiled with either TrueType or PostScript (CFF) outlines
  3. It is currently supported by FireFox 3.6+

Try to add that:

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

For all Solution index.php remove form url and woff file allowed. for write below code in .htaccess file and and make this alternation to your application/config/config.php file: $config['index_page'] = '';

For only Linux hosting server. .htaccess file details

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>

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

This is a helpful list of mimetypes


I have had the same problem, font/opentype worked for me


Mime 유형이 유일한 문제가 아닐 수도 있습니다. 글꼴 파일이 S3 또는 다른 도메인에서 호스팅되는 경우 Firefox가 다른 도메인에서 글꼴을로드하지 않는 문제가 추가로 발생할 수 있습니다. Apache에서는 쉽게 수정할 수 있지만 Nginx에서는 글꼴 파일을 base-64로 인코딩하고 글꼴 css 파일에 직접 포함해야 할 수도 있음을 읽었습니다.

참고 URL : https://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts

반응형