The complete list of font formats and their use

The complete list of font formats and their use

We’re all familiar with the best modern font, and the current font formats (.otf and .ttf) that we can install on our computers and even on mobile devices. But what about web fonts? Or apps? After a long debate on Twitter, I decided to write about different font formats and their uses.

What I learned from that debate is that different things happenning in the same environment may become confusing and are regarded as being the same or similar, and different free Adobe fonts are associated with the wrong use. When it comes to web, it seems that not all font authors know exactly how their work is used, and this might contribute to the paradoxical font licensing I previously wrote about.

Same environment doesn’t mean all things happening there are the same and use the same tools

Why do I say that? Well think about it this way: in a house 2 people can do 2 different things, one is cooking and one is sleeping. So these activities are performed each by different entities, they output different results, have different purposes, and need different tools. They have nothing in common other than taking place in the same house.

The same goes for things happening on a server. A server is actually a computer with some specific software installed, and computers can be used for different things that are not necessarily related between them other than using the same environment and it can be done with Fontsquirell or Creative Fabrica’s free webfont generator.

 

The example I wanted to give was about two things that happen on a server, both of which include the usage of fonts in two very different ways.

The two things are: server-side PDF generation and dynamic content generation with a CMS.

What is a CMS?

CMS stands for Content Management System, and we have the most popular example of CMS as WordPress. For example, a tech blog for developers Thoughts on Cloud, uses WordPress, which is highly customizable. It’s a software that takes the content you write in a dashboard and creates a page with it using a pre-built template. This operation is done on the server, where the content is stored in a database.

But whether using a CMS or not, all websites need a server to be hosted on to be viewable/accessible online, and they all use the same font format — .woff2 and .woff. Woff2 is the newest version of .woff, with improved compression algorithm.

What exactly is .woff2/.woff format?

Woff stands for Web Open Font Format and is a web-exclusive font format that cannot be used anywhere else or in any other environment. It’s a compressed format created especially to be “read” by browsers that will then render the website texts in it.

It cannot be installed on a computer, and it cannot be converted back to desktop font.

You can learn about how to embed web fonts self-hosted with @font-face, from Google Fonts, or correctly include them in WordPress, with the quick guide to using web fonts.

How difficult is it to create .woff fonts?

Not at all. It only takes seconds to convert a desktop font to web format (woff). It can be done with FontSquirrel’s free webfont generator for example (though please note that your font license must allow that), or in almost all cases font creation software has built-in option to export in different formats, including web.

No extra work from the font’s author is necessary.

What do CMS and PDF generation have in common?

Short answer is: nothing much. Other than being software that runs on a computer, nothing. Content generation has nothing to do with PDF generation, for see click here.

Actually software itself is a very broad term that includes a huge amount of types, purposes, programming languages, and environments under the same generic name.

Font formats currently in use

Font format Use Installable on a computer/server
Desktop format
(.otf, .ttf, PostScript)		 Everything that requires locally installable fonts, including branding/logo, graphic design, video production, PDF generation, server install, and mobile apps. Yes ✓
Web format
(.woff2, .woff, .ttf variable font)		 All types of websites, including websites that use a CMS like WordPress or a platform like Shopify No ×
Proprietary formats Only included in the apps they were designed for. An example would be LaTeX No ×

What font format is used on websites?

Use Font format
Logos, graphics, illustrations, banners Desktop format
(.otf, .ttf, PostScript)
Website content (text) Web format
(.woff2, .woff, .ttf variable fonts)
Logos, graphic illustrations, and banners you see on websites are images made with desktop fonts. Web fonts are used only for content text (like the one you’re reading now).

It’s so easy to make advertisements using banner templates.

How do I differentiate between graphic and text on a website?

The website text content is selectable, while any text included in a graphic, logo, illustration etc. is not. To select a text click and drag while holding the left button of your mouse.

PostScript font format

Although OTF and TTF are the standard for digital (not web), DTP (desktop publishing) and print industry still frequently use Adobe’s older standard format — PostScript. PostScript fonts have multiple extensions:

  • .pfb, .pfm, .afm (Windows)
  • .pfm, .afm, .inf (MacOS)
  • .pfa, .afm (Linux)
  • .ofm (OS/2)

The proprietary font formats are a bit beyond the scope of this article, as their use is strictly limited to the app they were designed for and were mostly created before the current standard formats.

Legacy web font formats not in use anymore

Note: EOT, TTF, and SVG (mentioned below) can still be seen on websites created a few years ago.

  • TrueDoc — developed by Bitstream in 1994, it was included with Netscape Navigator from version 4 to 6. While while not specifically a webfont format, it was the first standard for embedding fonts on web
  • EOT (Embedded OpenType) — a proprietary format owned by Microsoft and used in Internet Explorer from version 4 to 11
  • SVG (Scalable Vector Graphics) — used in old versions of Webkit-based browsers, mainly in Safari and iOS Safari but also available in Chrome 4-37 and Opera 10-24, it has been replaced by the standard .woff. This format should not be confused with the currently available svg format which is desktop installable only and can only be used in graphic software such as Adobe Illustrator.
  • TTF (TrueType Font) — While browser backward compatibility still exists, this is not recommended for use, as .woff format is essentially a compressed form of .otf and .ttf with additional metadata that can be read by the browser. An exception to this are variable fonts which are .ttf.

Legacy desktop font formats not in use anymore

Bitmap/raster — First type of fonts available in computers. You’ll recognize them as having a pixelated aspect and not being scalable. Each glyph is a bitmap (array of pixels).

There were a lot of non-standardized formats, as each operating system and software created its own:

  • PCF (Portable Compiled Font)
  • BDF (Glyph Bitmap Distribution Font)
  • SNF (Server Normal Font)
  • DWF (DECWindows Font)
  • BF, AFM (Sun X11/NeWS Font)
  • FON (Microsoft Windows)
  • Amiga Font
  • ColorFont
  • AnimFont
  • BMF (ByteMap Font)
  • PSF (PC Screen Font)
  • PK (Packed bitmap font bitmap file for TeX DVI drivers)
  • FZX (proportional bitmap font for ZX Spectrum)