Reputation: 2797
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
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.
references: CSS Tricks, caniuse.com, design.tutsplus.com
Upvotes: 4
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