OpenType Font & TrueType Font. Whats the difference?

Recently while learning CSS, I tried to include an external font. Then I got confused with .otf fonts and .ttf fonts, where both worked perfectly for me. But from that moment, I wanted to know more about those.

Which is better as external font for web content? And Why?

What is the overall difference?

Short answer

The difference is irrelevant in the context you're asking about. Use WOFF.

Slightly longer answer

Both formats are supported by virtually everything, and both formats are simply different kinds of OpenType (the spec) fonts, so can be packed as WOFF (or, these days, WOFF2) so you don't even need to know whether it was an .otf or .ttf file.

Full answer

files ending in .otf are almost universally OpenType fonts with the glyphs encoded using a CFF block, and .ttf files are almost universally OpenType fonts with the glyphs encoded using the TrueType glyf/loca set.

I say "almost" because the extension is irrelevant and font parsers don't actually look at the filename, they look at the file content, because OpenType fonts are OpenType fonts are OpenType fonts, and the header table's version, plus the table dictionary, tells the font parser what it's actually working with. The file extension is simply a legacy holdover from an era of computing when 8.3 filenames were still relevant.

There are, of course, some differences:

• TrueType fonts are generally bigger for the same outlines, because their graphics instructions aren't very rich (only quadratic curves are supported, with highly limited rasterizer instructions, and you can't go smaller than "full glyphs" for reuse), but are really easy to parse.
• CFF fonts are generally smaller because their graphics instructions are incredibly rich (cubic curves, highly controllable rasterizer hints, arbitrary byte subroutines for reusing any shared outline or outline property), but that also means they take more time to decode.

In the real world, the timing differences here are insignificant compared to the time required to download the fonts, so for web font purposes the only consideration is "which one is smaller", not "which extension does it have". For this it also matters whether you have a "real" .otf file (i.e. OpenType with CFF outline data) or not: a properly designed, real .otf file is going to be much smaller than an equivalent .ttf file, but if you got that .otf file through something like Font Squirrel as part of a font formats bundle that started life as a .ttf, that won't be the case and you might as well use the original .ttf instead.

Except you shouldn't, because system fonts contain a lot of data that is completely unused when loaded in the browser. Which is where WOFF/WOFF2 comes in: transcoding an OpenType font to Web Open Font Format font throws away a whole bunch of data that is required for system fonts, but useless for rendering text on a web page, so by definition, the WOFF/WOFF2 version is always going to be the smallest version of the font.

Browsers have moved on since the .ttf vs .otf vs .eot days, everything now supports WOFF/WOFF2, so just use that and don't put all the other formats in your @font-face rules. They're just noise at best, and wasted bandwidth/time/money, at worst.

(And that includes stylesheets you get from google webfonts, typekit, etc. Don't blindly link to their .css file, get the actual CSS, and remove all the dead formats).