Otf, ttf, eot, woff and svg. What mimetypes to use ?

If you're using a custom font on your website, you'll probably end up with a bunch of font files in various extensions. But do you know which Content-Type to use for each type of file ?

SVG

svg fonts are the easiest. The svg format is well documented, and svg fonts are not very different from svg images. Its mimetype is image/svg+xml.

EOT

The proprietary Microsoft format has its own (weird) mimetype, application/vnd.ms-fontobject.

WOFF

Since 2013, woff also happen to have its own registered mimetype, application/font-woff.

OTF & TTF

Those two do not have a registered mimetype. You could get away with defining an application/octet-stream. But if you want to gzip them (and you should), you often need a more precise Content-Type, one that is not shared with any other type of files.

So to this end, it is considered acceptable to define a custom mimetype of application/x-font-opentype and application/x-font-truetype. The x- is here to tell that it's a custom mimetype and that it should be treated as binary.

Tags : #fonts, #eot, #ttf, #otf, #woff, #svg

Want to add something ? Feel free to get in touch on Twitter : @pixelastic