The target audience for this blog are non-designer folks like me who have little to no clue about the various types of font files and when to use which. What prompted me to write this blog is replacing the font on this blog with “Space Grotesk” family. I downloaded the zip of the font which contained three folders: otf/, ttf/ and woff2/. I had no idea what was the difference between these files so I looked them up, and here’s what I found.
TrueType Font (TTF)
- Font format developed by Apple in the 1980s, which was licensed to Microsoft.
- Requires only one file for screens and a separate PostScript file for printing.
- PostScript fonts were created by Adobe.
- The font file has two parts: Printing information and Display for Screen information.
- Pro: Can provide high-quality printing.
- Con: Different versions for Mac and Windows which led to reliability issues across both systems.
OpenType Font (OTF)
- Jointly created by Adobe and Microsoft.
- Based on TTF with support for expanded character sets like ligatures, glyphs, etc.
Web Open Format Font (WOFF)
- WOFF1 was developed by Mozilla, Opera and Microsoft.
- This is a web-exclusive and compressed version of the above-mentioned formats.
- Unlike TTF and OTF, this font cannot be installed on a system.
- Best suited for web as compressed files means faster loadtimes on a website.
- WOFF2 was developed by Google with improved compression.
Use Cases
- Documentation: TTF can be used as expanded character sets are usually not required – if required, go for OTF.
- Designing: OTF should be preferred as the extra character data may be useful. SVG fonts (new version of OTF) can also be used.
- Printing: Definitely OTF.
- Web Development: WOFF2 because built for the web with better performance.