{"id":30,"date":"2009-08-09T11:00:21","date_gmt":"2009-08-09T18:00:21","guid":{"rendered":"http:\/\/www.jbarker.com\/blog\/?p=30"},"modified":"2011-05-28T17:35:13","modified_gmt":"2011-05-28T15:35:13","slug":"mime-type-css-web-fonts","status":"publish","type":"post","link":"https:\/\/www.jbarker.com\/blog\/2009\/mime-type-css-web-fonts","title":{"rendered":"Correct MIME Type for CSS Web Fonts"},"content":{"rendered":"<p>Support for <a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/\">CSS3 Fonts<\/a> via @font-face is now available in Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari, with support in Opera and Google Chrome due soon.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-72\" title=\"Web Browser Logos\" src=\"https:\/\/www.jbarker.com\/blog\/wp-content\/uploads\/2009\/08\/multibrowser_logos.png\" alt=\"Web Browser Logos\" width=\"414\" height=\"83\" srcset=\"https:\/\/www.jbarker.com\/blog\/wp-content\/uploads\/2009\/08\/multibrowser_logos.png 414w, https:\/\/www.jbarker.com\/blog\/wp-content\/uploads\/2009\/08\/multibrowser_logos-300x60.png 300w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/p>\n<p>With increasing support, more sites are being designed with web fonts. However, many web servers are not providing the correct MIME type for these files.<\/p>\n<p>For the Apache web server, the following configuration in an <code>.htaccess<\/code> file will provide the correct MIME type for web fonts:<\/p>\n<p><code>AddType application\/vnd.ms-fontobject .eot<br \/>\nAddType application\/octet-stream .otf .ttf<\/code><\/p>\n<p><!--more--><\/p>\n<p>The <a href=\"http:\/\/httpd.apache.org\/docs\/2.2\/mod\/mod_mime.html#addtype\">AddType directive<\/a> for Apache supports multiple file extensions and the values are case-insensitive.<\/p>\n<p>Web fonts are typically one of three file types:<\/p>\n<ul>\n<li>OpenType (.otf)<\/li>\n<li>TrueType (.ttf )<\/li>\n<li>Embedded OpenType (.eot)<\/li>\n<\/ul>\n<p>For many common file types found on the web, there is a dedicated MIME type defined. That is not the case for some font file types. Both OpenType and TrueType files do not have assigned <a href=\"http:\/\/www.iana.org\/assignments\/media-types\/\">MIME media types<\/a>.<\/p>\n<p>There is an assigned <a href=\"http:\/\/www.iana.org\/assignments\/media-types\/application\/vnd.ms-fontobject\">MIME type for Embedded OpenType (.eot) files<\/a>: <code>application\/vnd.ms-fontobject<\/code><\/p>\n<p>The MIME type <code>application\/octet-stream<\/code> is used is to indicate binary data that does not have a more specific, assigned MIME type. In practice it is often used as the default MIME for binary, non-text data that should be downloaded to a file. See <a href=\"http:\/\/www.rfc-editor.org\/rfc\/rfc2046.txt\">RFC 2046<\/a> for more details.<\/p>\n<p><strong>Update<\/strong> (27 February 2011): You may also be interested in the post <a href=\"https:\/\/www.jbarker.com\/blog\/2011\/web-fonts-mime-types\">Web Fonts: No MIME Types, No Problem<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Support for CSS3 Fonts via @font-face is now available in Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari, with support in Opera and Google Chrome due soon. With increasing support, more sites are being designed with web fonts. However, many web servers are not providing the correct MIME type for these files. For the Apache [&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-30","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\/30","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=30"}],"version-history":[{"count":19,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jbarker.com\/blog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}