{"id":91,"date":"2011-05-29T00:08:05","date_gmt":"2011-05-28T22:08:05","guid":{"rendered":"http:\/\/www.jbarker.com\/blog\/?p=91"},"modified":"2011-05-29T00:19:41","modified_gmt":"2011-05-28T22:19:41","slug":"resource-interpreted-font-transferred-mime-type","status":"publish","type":"post","link":"https:\/\/www.jbarker.com\/blog\/2011\/resource-interpreted-font-transferred-mime-type","title":{"rendered":"&#8220;Resource interpreted as Font but transferred with MIME type &#8230;&#8221;"},"content":{"rendered":"<p>Have you seen a warning like this in your web browser console?<\/p>\n<blockquote><p>&#8220;<code>Resource interpreted as Font but transferred with MIME type ...<\/code>&#8220;<\/p><\/blockquote>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.jbarker.com\/blog\/wp-content\/uploads\/2011\/05\/chromenewicon.png\" alt=\"Google Chrome web browser\" title=\"Google Chrome web browser\" width=\"400\" height=\"198\" class=\"alignnone size-full wp-image-102\" srcset=\"https:\/\/www.jbarker.com\/blog\/wp-content\/uploads\/2011\/05\/chromenewicon.png 400w, https:\/\/www.jbarker.com\/blog\/wp-content\/uploads\/2011\/05\/chromenewicon-300x148.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>Some browsers, like Google Chrome, will show this warning when a font is downloaded from a web server that sets an unexpected MIME type for fonts.<\/p>\n<p>For many font types, there is a solution!<\/p>\n<p><!--more--><\/p>\n<p>Update the configuration for your web server with the following MIME type per font file extension:<\/p>\n<ul>\n<li>.ttf \u2014 font\/truetype<\/li>\n<li>.otf \u2014 font\/opentype<\/li>\n<li>.eot \u2014 application\/vnd.ms-fontobject<\/li>\n<li>.woff \u2014 application\/x-font-woff<\/li>\n<\/ul>\n<p>If you are using Apache configuration, you may include the AddType directive for each font type:<\/p>\n<blockquote><p><code>AddType application\/vnd.ms-fontobject eot<br \/>\nAddType font\/opentype otf<br \/>\nAddType font\/truetype ttf<br \/>\nAddType application\/x-font-woff woff<\/code><\/p><\/blockquote>\n<p>With a specific MIME type configured per font, and not the generic <code>application\/octet-stream<\/code> MIME type, you should no longer see a warning in your web browser console.<\/p>\n<p>This configuration \u2014 while effective for cleaning up your console \u2014 does not include the technically <a href=\"\/blog\/2009\/mime-type-css-web-fonts\">correct MIME type for fonts<\/a> like OTF, TTF, and WOFF. For these font types, an official MIME type has not (yet) been approved. An official type for WOFF \u2014 <a href=\"http:\/\/www.ietf.org\/mail-archive\/web\/ietf-types\/current\/msg01115.html\">application\/font-woff<\/a> \u2014 has been requested.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you seen a warning like this in your web browser console? &#8220;Resource interpreted as Font but transferred with MIME type &#8230;&#8220; Some browsers, like Google Chrome, will show this warning when a font is downloaded from a web server that sets an unexpected MIME type for fonts. For many font types, there is a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,10,5],"class_list":["post-91","post","type-post","status-publish","format-standard","hentry","category-software","tag-css","tag-fonts","tag-web"],"_links":{"self":[{"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/posts\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":13,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/posts\/91\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/posts\/91\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/media?parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/categories?post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/tags?post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}