An Introduction to Font Types

In a previous blog post, we looked at the impact that well chosen typography can have in web design. Fortunately, with CSS we can import different fonts with the @font-face declaration and then reference this with the ‘font-family’ property.
However, why is it that we always have to declare various different formats of the same font? What is the difference between TTF, OTF, WOFF and EOT and is it really necessary to include them all?
First, let’s take a closer look at these font standards to understand a bit more about them:

Embedded OpenType (or EOT) is a compact form of OpenType made by Microsoft specially for Internet Explorer browsers.
TrueType (TTF) is a font standard developed by both Apple and Microsoft. It is the most common font format across both respective operating systems. It’s main strength is the degree of precision and control for font developers.
OpenType (OTF) was the natural successor to the TTF standard, building upon it further delivering more advanced typesetting features (small caps, ligatures, etc). OTF was developed by Microsoft in conjunction with Adobe and is also widely popular across main operating systems.
The Web Open Font Format (or WOFF), as the name suggests, is the first font standard made specifically for the web and is supported across all major browsers. It was introduced as a means of simplicity and because OTF and TTF fonts could easily be pirated.

So, do we really need to declare all these font types? The simple answer is no, we don’t need to declare all of them anymore. A few years ago it might well have been necessary to declare them to have some consistency throughout browsers, but now that we have a supported, purpose-built font standard for the web, we only ever really need to declare one.
Not only does it make life easier for developers, but by having one font to declare (that has better compression rates than OTF or TTF), this can help optimize websites by decreasing the number and size of files loaded.
The only drawback to declaring a single font standard (WOFF), is that there can be compatibility issues with very old browser versions, such as anything earlier than IE8 or Android browsers older than 4.4 for example. Additionally, CSS and HTML issues may present themselves on older browsers, so unless one is prepared to fix all of the accompanying problems, it is worthwhile just sticking with the standard font fallback (unless maximum compatibility is a requirement, of course).
References
https://css-tricks.com/snippets/css/using-font-face/
http://cssretro.blogspot.co.uk/2013/02/woff-ttf-otf-font-format.html