Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 252
user16948 Avatar asked Jun 12 '12 18:06

user16948


People also ask

Should I use TTF or WOFF?

TTF can be useful for extending support to some older browsers, especially on mobile, if you need it. Web Open Font Format (WOFF): WOFF was developed in 2009 as a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported by all modern browsers.

What is TTF OTF and WOFF?

WOFF is basically OTF or TTF with metadata and compression supported by all major browsers. It was created to live on the web. It is the result of collaboration by the Mozilla Foundation, Microsoft, and Opera Software. Because fonts are compressed, they load faster.

What does TTF mean in fonts?

TTF) Mean? A TrueType font is a font standard and is the major type of font found in both Mac and Microsoft Windows operating systems. It consists of a single binary file which contains a number of tables related to printer and screen versions of the typeface.

What is the use of WOFF file?

A WOFF file is a web font file created in the WOFF (Web Open Font Format) format, an open format used for delivering webpage fonts on the fly. It is saved as a compressed container and supports TrueType (. TTF) and OpenType (. OTF) fonts and also supports font licensing information.


1 Answers

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

like image 115
Rich Bradshaw Avatar answered Oct 01 '22 02:10

Rich Bradshaw