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

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to font-face

Examples related to webfonts