CODEWITHSUNDEEP
font-awesomewoff2
Yovav
Yovav

Reputation: 2797

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?

Upvotes: 6

Views: 4925

Answers (2)

Nick
Nick

Reputation: 171

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

Upvotes: 4

Font Awesome
Font Awesome

Reputation: 276

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.

Upvotes: 5

Related Questions