Do I really need all these font types loaded for FontAwesome or just the WOFF2 type?

Question

I'm looking at the FontAwesome path.less and it looks like it's loading a bunch of the same font but different types...

/* FONT PATH
 * -------------------------- */

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

Do I really need all these font types loaded for FontAwesome or just the WOFF2 type?

Tovatovar

Answer 1

This doesn't actually load all those file types. The browser will pick the best one and just load that file.

Woff2 coverage isn't great just yet: http://caniuse.com/#search=woff2. Some folks get by with regular woff only, but with Font Awesome you're getting broader coverage for free. No reason to remove the rest.

Outsail

Thank you very much! and also for that Awesome font :-) – Tovatovar

What about if you are bundling fontawesome in a native mobile app? Can you remove some of the formats to reduce the file size of the app without loosing compatibility? – Quidnunc

For bundling you can import each partial file from the fa npm package, just like in font-awesome file, but skipping "path" and adding just the formats you want. – Brachium

Answer 2

In 2022+ you probably only need the woff2 files. Browser support is now pretty good for woff2.

Woff2 files are better compressed than older font types. Woff2 fonts are compressed using brotli as part of the file format.

If you generate critical Css the references to those other font types could be taking up unnecessary space in your critical css.

caniuse.com can show you the browser support.

• EOT was for IE8 and below.
• TTF format was developed by Microsoft and Apple in the 1980s.
• WOFF was developed in 2009 and compresses the fonts.
• WOFF2 offers smaller file sizes and better performance for modern browsers.

references: CSS Tricks, caniuse.com, design.tutsplus.com

Burning