CODEWITHSUNDEEP
cssfonts
Seong Lee
Seong Lee

Reputation: 10520

Different font formats for webfonts

I am trying to understand why Font Awesome comes with various font formats and was wondering if it is no harm for use if I had to keep only one or two.

I want to identify things that I won't need for downsizing. I have yet to come across with documentation that explains this.

enter image description here

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

Upvotes: 2

Views: 362

Answers (3)

Sunyatasattva
Sunyatasattva

Reputation: 5840

The reason why you have those different file formats is crossbrowser compatibility. There are many font file types, but I will tell you about the most common ones.

EOT

Internet Explorer pioneered support for webfonts since IE4, I believe; older versions, however, only accept .eot files: so, if you want to support IE<9, you have to include that. But .eot is a proprietary file type and is exclusively supported by Internet Explorer, also is very compact and has a kind of digital rights protection to avoid usage without license (the file can have an URL-binding, tying it to a specific domain).

SVG

When Safari implemented webfonts (version 3), they decided to go for the .svg, and Opera followed. Being Webkit Chrome also supports .svg. As you know, SVG is basically graphics in XML format: this made them convenient since the browser wanted to start supporting vector graphics, but it's not the best solutions as fonts in this format can be pretty large.

TTF and OTF

The more common .ttf and .otf are supported by all the modern browsers. These formats have been around since forever: TrueType replaced the bitmap fonts in the 1980s with an outline format, and OpenType is basically built on that standard with added typographical features (such as ligatures, variations and so on). These features are really important for a serious web-typography, but are still in the process of being supported:

See:

WOFF

Lastly, .woff is basically .ttf/.otf with added compression (has a ~40% better compression than those) and metadata (for example, the license). It was specifically developed for the web by W3C for the web performance (bandwidth constraints) and has a suprisingly good support.

In conclusion, I don't think not putting them in the CSS will save you a few bytes, browsers are presumably smart on the fonts they download when encountering the @font-face property.

See: What fonts do browsers download when using @font-face

Upvotes: 6

Patrick Coffey
Patrick Coffey

Reputation: 1083

Different font formats are for different operating systems and browsers. I would suggest reading this article: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

This all boils down to browser support.

For instance, woff doesn't work on IE8 or various mobile browsers, whereas eot does; eot only works on IE. svg doesn't work in IE8 or old versions of Android Browser.

If you don't need to support IE8 then you can probably get away with dropping the eot file altogether. Equally if you don't need to support various mobile browsers then you can probably drop the svg version too.

Upvotes: 2

Related Questions