Convert OTF to WOFF

Specification sheets outlive the reasons they were written. A brand guidelines document from 2015, a platform’s asset requirements page, or a developer’s checklist copied from a tutorial will list .woff because that was the sensible answer when it was written, and nobody has revisited it since.

Arguing is rarely worth the hour. Produce the WOFF, produce the WOFF2 alongside it, and note in the handover that the second is the one browsers will actually use. That satisfies the specification and leaves the recipient better off than the specification would have.

A container swap and nothing else. The CFF table holding the cubic outlines, the character map, the metrics, the kerning and every OpenType feature the designer defined are copied verbatim and compressed. No glyph is redrawn, no feature is dropped, and the file can be unwrapped later to recover the OTF.

That last point has a consequence worth knowing before a handover: a WOFF is not a protective wrapper. It is a compressed copy of the font, and anyone who receives it can convert it back to an installable desktop file in seconds. Whatever restraint applies to the OTF applies to the WOFF.

A good package is small and unambiguous: one file per weight and style, named so the weight is legible without opening anything, and a text file or snippet containing the @font-face rules that go with them. The developer should not have to guess which file is the semibold italic.

Include only the weights the design uses. Handing over a folder of eighteen cuts because the family has eighteen is how a site ends up loading four of them by accident, and it makes the licence exposure larger than the project needs it to be.

Most commercial font licences name the licensee and do not allow transfer. A studio that bought a desktop licence and hands the converted files to a client has generally not made the client a licensee — it has made two parties using one licence, and the exposure usually lands on whoever signed.

The workable routes are the ordinary ones: the client buys the web licence in their own name and you produce or receive the files, or the project uses an open-licensed family. Fonts under the SIL Open Font License may be converted, subset, redistributed and self-hosted, provided they are not sold on their own and reserved names are not reused, which is why so much client work quietly settles on them.

The browser picks a file using the weight and style declared in the @font-face rule, not the filename. But the filename is what a human reads three months later, so the two should agree — brand-600-italic.woff beside a rule declaring font-weight 600 and font-style italic leaves nothing to interpret.

The failure this prevents is synthetic type. A family delivered with only a regular file, then used in bold, produces a browser-smeared bold that is visibly worse than the real cut. It is the most common defect in a delivered font package and it is entirely a packaging mistake rather than a conversion one.

WOFF2 is read by every current browser and is around thirty per cent smaller than the WOFF of the same font. Whatever the specification says, that is the file the site should serve, and producing it costs one more conversion.

Do not stack them in the same @font-face rule as a fallback pair. The browser takes the first source it understands, which will always be the WOFF2, so the WOFF becomes a file nobody downloads and nobody updates — a stale copy of the typeface sitting on the server waiting for a tool to reorder the rule. Deliver both, and say which is for use.

A single-weight OTF with a full Latin Extended character set commonly starts somewhere in the low hundreds of kilobytes. Wrapping it as WOFF removes a useful fraction of that; wrapping it as WOFF2 removes roughly a third again.

Neither figure is where the saving actually is. Subsetting the font to the characters the site will set beats both by a wide margin — a 300 KB desktop font reduced to basic Latin and converted to WOFF2 routinely lands around 25 KB. If page weight is in the brief, subsetting belongs in the deliverable, and it should be done before the conversion rather than after.

This is the trap that catches studios specifically. Your machine has the OTF installed, so when a browser cannot load the WOFF it falls back to the locally installed family of the same name and the page looks perfect. The client, who has no such font, sees Arial.

A private browsing window does not help — the font is installed at the operating system level, not in the browser. Check on a second machine, on a phone, or by temporarily giving the @font-face family a name no installed font uses. Ten seconds of that removes the single most embarrassing way a font handover fails.

Drop the whole folder rather than one file at a time. Up to 100 fonts convert in a single pass and come back as a ZIP with names preserved, which is the shape a delivery wants anyway. Repeat once for WOFF2 and the package is done.

The work runs on our server, because fontTools has no browser build. Each file travels over an encrypted connection, is converted in an isolated environment, and the working directory is removed when the job finishes. The free allowance is 100 server conversions a day with a 25 MB ceiling per file — a full family and its second format fit inside a fraction of that.