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

by

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

More Related Contents:

  1. Fix custom font line-height with CSS
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. Wait for fonts to load before rendering web page
  4. Create webfont with Unicode Supplementary Multilingual Plane symbols
  5. Converting and rendering web fonts to base64 – keep original look
  6. Use multiple @font-face rules in CSS
  7. Multiple font-weights, one @font-face query
  8. Webfont Smoothing and Antialiasing in Firefox and Opera
  9. Fallback fonts on special characters
  10. Non-Standard fonts in web?
  11. Using custom fonts using CSS?
  12. Same font except its weight seems different on different browsers
  13. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  14. Is there any “font smoothing” in Google Chrome?
  15. How do I install a custom font on an HTML site
  16. What is the status of TTF support in Internet Explorer?
  17. Downloading a Google font and setting up an offline site that uses it
  18. @font-face anti-aliasing on windows and mac
  19. How can I determine what font a browser is actually using to render some text?
  20. @font-face works in IE8 but not IE9
  21. Using .otf fonts on web browsers
  22. Font size in CSS – % or em? [duplicate]
  23. Webpack “OTS parsing error” loading fonts
  24. Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream
  25. CSS @font-face not working in IE8
  26. Why would font names need quotes?
  27. Make text height 100% of div?
  28. How does ?#iefix solve web fonts loading in IE6-IE8?
  29. font-face with wrong MIME type in Chrome
  30. How can I fix the ‘Missing Cross-Origin Resource Sharing (CORS) Response Header’ webfont issue?

Leave a Comment