If you only need one answer: use WOFF2 on your website. Every current browser supports it, and it's the smallest of the four. TTF and OTF are the files you install on your computer, and WOFF is the older web format that WOFF2 replaced.
It helps to know where each one comes from when a download hands you a folder full of them.
TTF and OTF: the desktop formats
TTF stands for TrueType, a format Apple developed in the late 1980s. OTF is OpenType, which Microsoft and Adobe built on top of TrueType in the 1990s. Today almost every font is technically an OpenType font, whichever extension it has.
The real difference is how the letter shapes are drawn:
- A
.ttffile uses TrueType outlines, built from quadratic curves. - An
.otffile usually uses CFF outlines, the PostScript-style cubic curves that Adobe's fonts have always used.
For screen use you won't see a difference. Both work fine as the starting point for a web font. What they have in common is that neither is compressed, so they're bigger than they need to be for a website.
WOFF: the first web format
WOFF, the Web Open Font Format, arrived in 2010. It's essentially a TTF or OTF file wrapped in a container and compressed with zlib, the same compression as a zip file. It also has room for license information.
WOFF was a big improvement over shipping raw TTF files, and every browser still supports it. It just isn't the best option anymore.
WOFF2: what to use
WOFF2 uses Brotli compression, plus some transforms that reorganize the font's data so it compresses better. In Google's tests across its font library, WOFF2 files came out about 30 percent smaller than WOFF on average.
Every current version of Chrome, Firefox, Safari and Edge supports WOFF2, so you don't need a WOFF fallback unless you have to support very old browsers like Internet Explorer 11. For most sites, one WOFF2 file per style is all you need:
@font-face {
font-family: "Lora";
src: url("/fonts/lora-latin.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}If you're working from an older stylesheet, you may see a long src list with .eot and .svg files and a ?#iefix hack. Those were for Internet Explorer 8 and early iPhones. You can delete them.
Variable fonts
A variable font is a single file that contains every weight (and sometimes width or slant) of a family. Instead of separate files for regular, medium and bold, you load one and set any weight in between.
Variable fonts work in every current browser and in any of the formats above, including WOFF2. The font-weight: 400 700 line in the example tells the browser the file covers that whole range.
Whether a variable font is smaller depends on how many styles you use. For three or more weights it usually wins. For just regular and bold, two static files can come out smaller. You can also narrow a variable font's range when you subset it, if you only use part of it.
Converting to WOFF2
Fonts from Google Fonts download as TTF. Many commercial foundries include WOFF2 files in their web license packages already, so check before converting anything.
To convert, drop the file into the font subsetter. It accepts TTF, OTF, WOFF and WOFF2, so it can also shrink a web font you already have. Pick the character sets your site uses, and it writes a WOFF2 file along with the @font-face CSS and a preload line. Subsetting plus WOFF2 compression routinely cuts a font by 70 to 90 percent, and the file never leaves your device while you do it.
One thing to check first is the license. Open-source licenses like the SIL Open Font License, which covers most Google Fonts, allow converting and subsetting. Commercial fonts often need a separate webfont license, and some don't allow modifying the file at all.
Quick reference
- TTF: desktop format with TrueType outlines. Uncompressed. Convert it before using it on the web.
- OTF: desktop format, usually with CFF outlines. Also uncompressed. Convert it too.
- WOFF: compressed web format from 2010. Still works, but WOFF2 is smaller.
- WOFF2: the web format to use. Smallest, and supported everywhere that matters.
- EOT and SVG fonts: obsolete. Remove them from your CSS.
Once you have WOFF2 files, How to self-host Google Fonts covers uploading them, writing @font-face rules and preloading the main file.