381

In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff.

Why should we use all of these types?

If they are special to different browsers, why is the number of them greater than the number of the major web browsers?

Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
user16948
  • 4,801
  • 10
  • 30
  • 41

3 Answers3

577

Answer in 2019:

Only use WOFF2, or if you need legacy support, WOFF. Do not use any other format

(svg and eot are dead formats, ttf and otf are full system fonts, and should not be used for web purposes)

Original answer from 2012:

In short, font-face is very old, but only recently has been supported by more than IE.

  • eot is needed for Internet Explorers that are older than IE9 - they invented the spec, but eot was a proprietary solution.

  • ttf and otf are normal old fonts, so some people got annoyed that this meant anyone could download expensive-to-license fonts for free.

  • Time passes, SVG 1.1 adds a "fonts" chapter that explains how to model a font purely using SVG markup, and people start to use it. More time passes and it turns out that they are absolutely terrible compared to just a normal font format, and SVG 2 wisely removes the entire chapter again.

  • Then, woff gets invented by people with quite a bit of domain knowledge, which makes it possible to host fonts in a way that throws away bits that are critically important for system installation, but irrelevant for the web (making people worried about piracy happy) and allows for internal compression to better suit the needs of the web (making users and hosts happy). This becomes the preferred format.

  • 2019 edit A few years later, woff2 gets drafted and accepted, which improves the compression, leading to even smaller files, along with the ability to load a single font "in parts" so that a font that supports 20 scripts can be stored as "chunks" on disk instead, with browsers automatically able to load the font "in parts" as needed, rather than needing to transfer the entire font up front, further improving the typesetting experience.

If you don't want to support IE 8 and lower, and iOS 4 and lower, and android 4.3 or earlier, then you can just use WOFF (and WOFF2, a more highly compressed WOFF, for the newest browsers that support it.)

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Support for woff can be checked at http://caniuse.com/woff
Support for woff2 can be checked at http://caniuse.com/woff2

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • 82
    *`woff`... has a mode that stops people pirating the font*? How on earth can/does that work? – Mark Amery May 22 '13 at 15:33
  • Maybe I'm wrong – I'm sure I recall a flag that disabled something like 'desktop mode' to ensure a user couldn't use the font outside of font-face… Perhaps that was an earlier spec? – Rich Bradshaw May 23 '13 at 07:21
  • 1
    From what I see, TTF is lighter than WOFF, so 99% of time there is no reason to use WOFF – vsync Sep 12 '13 at 12:32
  • 13
    TTF shouldn't be lighter than WOFF. WOFF is a compressed form of TrueType - OpenType font (ttf and otf). – toto_tico Jan 23 '14 at 06:24
  • 8
    The point of WOFF is not anti-piracy. [TypeKit](http://blog.typekit.com/2010/12/02/the-benefits-of-opentypecff-over-truetype/) says, "the two main benefits OpenType/CFF fonts have over TrueType fonts are 1) their smaller file size, and that 2) they require far less hinting information in order to render well in environments that allow some form of anti-aliasing." – Michael McGinnis Jul 11 '14 at 17:36
  • 1
    @MarkAmery setting a flag, probably. And expecting people who write woff-to-ttf converters to respect it. – Camilo Martin Sep 01 '14 at 00:34
  • Regardless of the wrong references from caniuse.com, woff is supported at least by Android 4.1.2, I tried it with a Phonegap app successfully. – andreszs Jan 07 '15 at 05:25
  • And then there is WOFF2 – mowgli Jun 09 '15 at 15:34
  • @CamiloMartin But why would someone, who wants to pirate a font suddenly stop because of a flag? I don't get it. – Zelphir Kaltstahl Nov 24 '15 at 12:28
  • 10
    @Zelphir tools make it hard to create embeddable fonts with that flag, and your run-off-the-mill designer is programming-illiterate and could only remove the flag if someone designed a Mac app with a shiny "pirate font" button. Moreover, if they are a corporation, you can bring legal charges. If they are some guy with a blog, talk to them, failing that, their host, etc - but keep in mind people who can't buy your font aren't potential costumers anyway, so I'd say free publicity is worth more than the hassle of convincing them to just swap it for the closest thing on dafont. – Camilo Martin Nov 25 '15 at 17:26
  • 1
    @Zelphir TL;DR: only become a font designer for passion. – Camilo Martin Nov 25 '15 at 17:30
  • Does the CSS in this answer specify WOFF and WOFF2 in the correct order, if this is a consideration? – Marcel Apr 28 '16 at 20:39
  • 2
    @Marcel first supported format is used, so this will use WOFF2 if supported. – gsnedders Jul 27 '16 at 14:03
  • Correct me if I am wrong, It seems that most newer(2018) browser now prioritize WOFF2/WOFF if file is available. – naviciroel Feb 19 '18 at 01:47
  • Great question, great answer : just a simple followup question, if you need all 4 files, I assume there is some kind of computer program that makes it possible to export one format to the 4 other ones? (maybe with a template CSS file?) - that would be great. Anybody ? – bvdb Oct 11 '18 at 10:28
  • Really great answer!!! Honestly, if there were a top 100 stack overflow answers list, I would rate this as being near the top. Its very accurate, informative, reads well, grammar & spelling are on point, yet it isn't over elaborated, or more extensive than it needs to be _(which is something I often struggle with when I author an answer)_. – JΛYDΞV Jun 12 '22 at 14:34
  • WOFF does not support Internet Explorer 8 - 11, so if legacy support is something that matters, one has to add the EOT Format. [Reference](https://medium.com/@aitareydesign/understanding-of-font-formats-ttf-otf-woff-eot-svg-e55e00a1ef2) – JJY9 Apr 17 '23 at 07:02
23

Woff is a compressed (zipped) form of the TrueType - OpenType font. It is small and can be delivered over the network like a graphic file. Most importantly, this way the font is preserved completely including rendering rule tables that very few people care about because they use only Latin script.

Take a look at [dead URL removed]. The font you see is an experimental web delivered smartfont (woff) that has thousands of combined characters making complex shapes. The underlying text is simple Latin code of romanized Singhala. (Copy and paste to Notepad and see).

Only woff can do this because nobody has this font and yet it is seen anywhere (Mac, Win, Linux and even on smartphones by all browsers except by IE. IE does not have full support for Open Types).

Eric
  • 2,539
  • 18
  • 23
user2422970
  • 387
  • 2
  • 4
  • 3
    I don't see anything special on that website. If I copy it into an editor (has utf8 support) I still see only normal text. What is it that woff exactly does? – Zelphir Kaltstahl Nov 24 '15 at 12:31
  • 6
    Two-thirds of this answer are either wrong or irrelevant. Also that link is broken. – Yay295 Aug 08 '16 at 14:37
16

WOFF 2.0, based on the Brotli compression algorithm and other improvements over WOFF 1.0 giving more than 30 % reduction in file size, is supported in Chrome, Opera, and Firefox.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ has an example on how to use it.

Basically you add a src url to the woff2 file and specify the woff2 format. It is important to have this before the woff-format: the browser will use the first format that it supports.

Jyrki Alakuijala
  • 605
  • 5
  • 7