Font File Formats: When to Pick TTF, OTF, WOFF, TTC and Variable

TTF and OTF are two outline formats. TTF (TrueType Font) describes outlines with quadratic Béziers and has the best Windows compatibility - almost every release ships TTF. OTF (OpenType Font) usually packs cubic Bézier (PostScript) outlines and richer typographic features such as advanced ligatures, optical sizes and stylistic sets, with fuller support in professional tools like InDesign and Figma. On screen the two look nearly identical and either installs fine. The modern OpenType scheme unifies both as outlines under one container, so a .ttf file today can already carry the advanced features that used to require .otf - the suffix no longer decides capability. Rule one: prefer the OTF cut for design if advanced typography matters; a TTF-only bundle (common in Windows land) is perfectly usable.

On the web, fonts travel as WOFF and WOFF2 compressed containers; WOFF2 typically presses another 30-50% smaller than WOFF with mainstream browser support, making it the modern default, while WOFF serves as fallback for legacy browsers. They wrap a TTF/OTF into a format that CSS @font-face reads but the OS won't adopt. Selection is simple: on your own site, self-host the WOFF2 under a strongly cached directory (this directory, for compliance and bandwidth, hosts no font files at all - it links to official downloads only); via an official CDN like Google Fonts, just drop in its <link> or stylesheet and get format negotiation for free. Remember that a full CJK WOFF2 can still run to several megabytes - subset by frequency and by script or first paint stalls.

TTC (TrueType Collection) packs several fonts into one file; big CJK families like Source Han, Noto and Dream Han often ship all weights or all region variants as a TTC. On the desktop, install the TTC directly and the OS exposes each embedded face; but the web, some embeds and older software handle TTC poorly, and the single file is huge. The right move is on-demand splitting: use a tool (e.g. FontTools) to export one weight or one language subset as standalone TTF/OTF, then WOFF2-ify and subset it, deploying only what you need. Every CJK font listed here links to the official TTC / multi-weight package; for compliance we point to the official page and host nothing, so do the splitting and subsetting locally under the official licence - open licences such as OFL permit this transformation.

A variable font compresses an entire family - all weights and often width, slant and optical size - into one file, so intermediate weights need no separate install or fetch, and the web can interpolate weight with CSS or animate it on hover. For Chinese, this makes every weight from 100 to 900 continuously available, removing the old stretch-and-distort hack. The two coexist happily: static weights suit deterministic print and system typography; variable fonts suit the web and weight-sensitive interaction. Among this directory's entries, Inter, Figtree, Plus Jakarta Sans, Public Sans, Crimson Pro, M PLUS Rounded 1c, Zen Kaku Gothic New, Nanum Gothic and the Source Han / Noto series all publish official variable builds - the home page filter tag 'Variable' will list them - so grab the file clearly marked 'Variable'.

Five practical conclusions: 1) Installing into the OS: prefer TTF/OTF, else install the TTC collection; 2) To a print shop or as a design deliverable: use OTF and attach the licensing note with a screenshot of the authorisation text; 3) For CSS @font-face: WOFF2 only, WOFF as a legacy fallback; 4) That pile of files on a GitHub release page: TTF/OTF are for desktop, WOFF for the web, Variable for web/interaction, TTC for desktop collections - take what you need, not everything; 5) For CJK giants: decide up front whether you truly need all weights and the full character set - most projects only need a subset of common-weight files. Follow these five and most format mistakes disappear.