Any genuine difference between file formats for fonts

Question

I have my own font in the following formats (with file size):

font.eot (66kb)

font.svg (204kb)

font.afm (79kb)

font.otf (107kb)

font.woff (42kb)

font.pfb (130kb)

font.ttf (66kb)

Thus, exactly the same font has a completely different file size depending on the format .. woff is the smallest in size.

According to the w3school @font-face page, EOT works on IE6 +, while other formats work on IE9 + - in addition, I can not find information about the differences between these formats.

My question is, does format selection matter in terms of quality or compatibility?

Answer 1

Absolutely yes. Here is a great article about the specific question you are asking.

http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/

There is another type of font that you did not specify, and is the most recommended format in terms of file size (smallest) and browser compatibility: WOFF (Web Open Font Format).

If you focus on IE 8 and below, you will need to use something along with WOFF. Here is an example focused on legacy browsers:

 @font-face { font-family: Graublauweb; src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */ src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */ url('Graublauweb.woff') format('woff'), /* Modern Browsers */ url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */ url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */ } 

And although it is not completely “yet” in terms of browser adoption speed, the future will be WOFF 2.0, since compression ratios will be about 30% - 50% compared to WOFF.

Here is another resource describing different font formats: http://www.w3schools.com/css/css3_fonts.asp

TrueType Fonts (TTF)

TrueType is a font standard developed by Apple and Microsoft in the late 1980s. TrueType is the most common font format for Mac OS and Microsoft Windows.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType and is a registered trademark of Microsoft. OpenType fonts are commonly used today on major computer platforms.

Open Web Font Format (WOFF)

WOFF is a font format for use on web pages. It was developed in 2009 and is currently a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support the distribution of fonts from server to client over a network with bandwidth limitations.

Web Open Font Format (WOFF 2.0)

TrueType / OpenType is a font that provides better compression than WOFF 1.0.

SVG Fonts / Shapes

SVG fonts allow you to use SVG as glyphs when displaying text. The SVG 1.1 specification defines a font module that allows you to create fonts in an SVG document. You can also apply CSS to SVG documents, and the @ font-face rule can be applied to text in SVG documents.

OpenType Embedded Fonts (EOT)

EOT fonts are a compact form of OpenType fonts developed by Microsoft for use as embedded fonts on web pages.