Search code examples
font-awesomewoff2

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

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?

Solution

  • 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.