Rectangle 27 0

css3 Why should we include ttf, eot, woff, svg,... in a font face?


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

@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.

At the same time, iOS on the iPhone and iPad implemented svg fonts.

From what I see, TTF is lighter than WOFF, so 99% of time there is no reason to use WOFF

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.)

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

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?

TTF shouldn't be lighter than WOFF. WOFF is a compressed form of TrueType - OpenType font (ttf and otf).

The point of WOFF is not anti-piracy. TypeKit 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."

Then, woff was invented which has a mode that stops people pirating the font. This is the preferred format.

eot is needed for Internet Explorers that are older than IE9 - they invented the spec, but eot is a horrible format that strips out much of the font features.

ttf and otf are normal old fonts, but some people got annoyed that this meant anyone could download and use them.

Note
Rectangle 27 0

css3 Why should we include ttf, eot, woff, svg,... in a font face?


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.

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.

Note
Rectangle 27 0

css3 Why should we include ttf, eot, woff, svg,... in a font face?


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?

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).

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).

Take a look at this web site. 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).

Two-thirds of this answer are either wrong or irrelevant. Also that link is broken.

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.

Note
Rectangle 27 0

css3 Why should we include ttf, eot, woff, svg,... in a font face?


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.

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 (pending in upcoming version 35).

Note
Rectangle 27 0

css3 Why should we include ttf, eot, woff, svg,... in a font face?


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?

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).

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).

Two-thirds of this answer are either wrong or irrelevant. Also that link is broken.

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.

Note
Rectangle 27 0

css3 Why should we include ttf, eot, woff, svg,... in a font face?


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.

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.

Note
Rectangle 27 0

css3 Why should we include ttf, eot, woff, svg,... in a font face?


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

@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.

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.)

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

TTF shouldn't be lighter than WOFF. WOFF is a compressed form of TrueType - OpenType font (ttf and otf).

The point of WOFF is not anti-piracy. TypeKit 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."

Note