14 ms·

Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

506 points by mattiemass 10y ago

usaphp 10y ago
I've been using https://icomoon.io/app/ https://icomoon.io/app/ for years now to pick only the fonts I like and it can also generate icon fonts from svg so that I can merge different icon sets and pick the only icons I will use in my projects.
- puddintane 10y ago
  This is definitely my go-to for slimming down huge icon packs. Font pack companies really shouldn't focus on that since there are so many tools that help developers do this as well.
- balamaci 10y ago
  Guess you don't care for the high probability that the user has already the CSS in local cache .
deleted 10y ago
[deleted]
sheeshkebab 10y ago
Awesome!
anonymish 10y ago
There are some really valid points in here and I dislike the idea of using the whole font when only a few icons are required. But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? I would think that does more harm than everyone grabbing a fully cached copy once from a cdn.
- redbergy 10y ago
  What an interesting thought. I wonder what the actual user base of a library would have to be before it would even itself out and then go over the threshold of where you would see a return. Certainly 74 million sites should do it if they were all using the same CDN but I have no idea how you would start to even try to calculate this.
- wyldfire 10y ago
  The distribution of icons used is probably not uniform, so it's not like a worst case scenario of all misses all the time. Just the less popular ones.
  - icebraining 10y ago
    Even if you subset is the same as mine, if each of us is doing the subsetting ourselves, we won't share the same URL, hence the browser will still fetch it twice. On the other hand, it seems that FA themselves are building a CDN with subsetting, so they could in fact provide those shared subsets. Unfortunately (but understandably) it's paid, so most of us can't use it.
- Klathmon 10y ago
  It's one of those things that works "in a perfect world", but in the real world it just doesn't work out that well. For starters, leveraging caching via a common CDN pretty much requires everyone to be using a single version from a single CDN. If you can't agree on that, then every time a new version comes out the web is split and the caching doesn't work, and every time someone decides to use another CDN (or someone provides a new one) the group is split again. But then split that across all the fonts, formats, and compression schemes available and you'll see that the chance that a visitor has seen that font, at that version, from that CDN, using that compression scheme, in that format at any point in the past EVER is actually significantly smaller than you'd think. Which brings us into the next point. Even if you've seen it before, the chances that you'll have it cached is pretty small. Browser caches are suprisingly small in the grand scheme of things, and people tend to clear them more often than you think. Add in privacy browser mode and "PC cleaner" programs and the average person's caches lasts much shorter than at least I expected it to. But even worse are mobile caches. IIRC older android had something like a 4MB cache!!! And until very recently safari had something like a 50mb limit (and before that didn't cache ANYTHING to disk!). Now it's better, but you are still looking at a few hundred MB of cache. And with images getting bigger, big GIFs being common, huge amounts of AJAX requests happening all the time in most web pages, you'll find that the browser cache is completely cycled through on a scale of days or hours not weeks or months. IMO it's at the point where the "dream" of using a CDN and having a large percentage of your users already have the item in their cache isn't going to work out, and you are better off bundling stuff yourself and doing something like "dead code elimination" to get rid of anything you don't use. And that method only becomes more powerful when you start looking at custom caching and updating solutions. A few months ago I saw a library that was designed to only download a delta of an asset and store it in localstorage so updates to the application code only need to download what changed and not the whole thing again. Sadly I can't seem to find it again.
  - Spooky23 10y ago
    These things highlight how the current system of font distribution is really suboptimal. Even CDN hits are metered, and the idea that I need to either load or cache a bunch of data to render text is dumb. My employer manages like $20k devices. I betcha we spend 5 figures annually on this crap.
- koolba 10y ago
  > But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? Disk is cheap. Particularly disks that you don't pay for like your users' disks.
  - matt_kantor 10y ago
    It's not about disk, it's about network I/O. Making your resource "more unique" means more cache misses and more requests that need to be served (in theory anyway, see Klathmon's sibling comment[0] for more on this). [0]: https://news.ycombinator.com/item?id=13138826 https://news.ycombinator.com/item?id=13138826
    - koolba 10y ago
      Not being a fan of used shared CDNs for static resources[1], I don't see the issue here. They're going to have to download something anyway so from the perspective of your users it's still one download, just smaller. With proper unique namespacing (unique URL per version) and HTTP Cache-Control headers, they only have to download it once (assuming they don't clear their local cache). [1]: Combination of security reasons and unnecessarily coupling apps to the public internet.
- yumraj 10y ago
  Unfortunately it's the same with Bootstrap and other JS/CSS frameworks/libraries like that. You typically only use a small subset but it is non-trivial to carve out the much smaller set that you need. There is some tooling that claims to attempt at cleanup, but not sure how tested they are.
- oliv__ 10y ago
  Usually when I want to use under 10 icons, I just download an image of each with this handy tool: http://fa2png.io http://fa2png.io (not affiliated, just a user)
proaralyst 10y ago
What's the argument against icon fonts? Using actual SVGs?
- anonymish 10y ago
  Yes 100% put your icons in an include file of svg defs. There are a number of tools that will optimize svg files for size like svgo. Output straight from Illustrator, for example, has a lot room for improvement. I also usually end up hand-tweaking for things like removing the full style and doing that in my site's CSS. What I think is really still needed are more options besides Illustrator for generating svg content. Yes, Inkscape is overall ok but is lacking in setup ease and genera speed. There a number of programs that are so close to doing what is needed and then won't save or export an svg. Pixelmater, looking at you.
- TheCoreh 10y ago
  - Font rendering is very inconsistent across platforms, so your icons can look pretty bad (e.g. on Windows) - You're more likely to hit aligment/layout issues because you're using a tool designed for text to render pictures - The character codes used are textual information but have no semantic meaning (this can be addressed by using ligatures or characters in the private unicode range) - Adding more icons requires regenerating the font - Using a subset of icons requires regenerating the font - Font authoring is non-trivial and requires much more specialized tools and knowledge when compared to SVG - You need to ship the font in various formats (TTF, OTF, WOFF, WOFF2) - It's not easy to animate icons, or include colors or transparency - By now SVG support is sufficiently widespread, so the original rationale for using font icons no longer applies None of these, except maybe the rendering quality, are deal breakers. Workarounds and counterarguments do exist. And SVG does have some disadvantages too (e.g. parsing overhead, filesize, memory consumption) I personally side with using SVGs currently. As technology progresses, I might definitely reassess my view.
- aerique 10y ago
  Icon fonts have been breaking websites for people that do not allow websites to set their fonts.
allendoerfer 10y ago
The FOSS web community should participate in a global feature freeze and stop creating new libraries and frameworks for a year or two to work on stuff like this instead. Just so much opportunity everywhere.
mosburger 10y ago
If you're only using a small subset of FontAwesome (as I suspect many people do), I'd imagine at some point it'd make a lot of sense to use data-uri's to effectively embed them directly in an existing request, which would be faster than a CDN? I saw a talk by someone from Smashing Magazine where they basically did this for a subset of their WebFonts (downloading the entire font asynchronously afterward), then they cached their WebFonts in LocalStorage, but it seems like it make even more sense for an icon font where you're using a very small subset.
- espadrine 10y ago
  That is what I did for the shields.io logo: https://raw.githubusercontent.com/badges/shields/master/logo.svg https://raw.githubusercontent.com/badges/shields/master/logo... Unfortunately it is still a bit big. Simply converting it to SVG would probably be smaller. I'd welcome a simple tool that does that!
  - mosburger 10y ago
    Yeah, it seems like a tool like that wouldn't be hard to build... hmm... :)
    - vincent91 10y ago
      Inkscape can convert fonts inside an SVG to paths.
  - nathan-wall 10y ago
    I've been converting each font awesome image I need to SVG by hand. It's actually really easy. 1. Open fontawesome-webfont.svg in a text editor. 2. Find the glyph you want to use. 3. Copy it into a new file. 4. Add boilerplate[1] to new file. 5. Change the <glyph> tag to a <path> tag. 6. Add the attribute `transform="scale(0.1,-0.1) translate(0,-1536)"` 7. Open the file in Chrome and see your SVG. [1] boilerplate: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> {glyph goes here} </svg> [Example] Starting with the following glyph: <glyph glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> We end with: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> <path transform="scale(0.1,-0.1) translate(0,-1536)" glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> </svg> The `unicode` and `glyph-name` attributes can be removed.
jstapels 10y ago
Unfortunately I think a lot of the points in this article are lost if you assume that the CDN's serving up the TTF for FontAwesome are using GZIP compression.
- chrisan 10y ago
  I was curious and checked out FA's CDN https://use.fontawesome.com/releases/v4.7.0/fonts/FontAwesome.otf https://use.fontawesome.com/releases/v4.7.0/fonts/FontAwesom... and the rest of the fonts as https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.* https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesom... (not sure why they name the OTF differently) otf 110KB eot 102KB svg 157KB ttf 102KB woff 96.1KB woff2 75.8KB All appear to be using gzip in headers
  - hmottestad 10y ago
    On my machine, the otf version uses much less bandwidth. From 52.4 kb to 16.4.
    - chrisan 10y ago
      I'm getting the same results in Chrome using mac, win10, or ubuntu. Are you using the same URLs I posted?
      - hmottestad 10y ago
        http://imgur.com/a/acTMh http://imgur.com/a/acTMh
        chrisan 10y ago
        Well I'm stumped. Would love to know how we are getting different results, and how your results (16KB) are _so_ much better than mine (110KB) Here is a codepen if someone else wants to try OTF results http://codepen.io/anon/pen/gLjLMv http://codepen.io/anon/pen/gLjLMv
dmtroyer 10y ago
Seems like they could now afford to have the author consult on the project.
jordanielewski 10y ago
I used http://fontello.com/ http://fontello.com/ when I needed few icons
- meirelles 10y ago
  The fontello is awesome. It's possible add custom svg too.
jsnell 10y ago
Is the 2000TB/day number reasonable, or just clickbait? It's all based on coming up with two numbers that when multiplied say that this resource is downloaded 73 billion times a day. That's 20 times / day for every internet user (even those using it on a 2G connection once a year). Given a reasonable caching period of 1 month, that'd mean the average user visits 600 different sites a month. That seems like much more than one would expect. Or to look at it another way, global IP traffic is apparently estimated at 72000 PB/month. That's 2400PB/day. This font alone would then be accounting for 0.3% of all internet traffic, or 1% of all non-video traffic. Again, that's a very high number. But at least it doesn't appear to be a totally impossible number either, just an awfully implausible one.
- koliber 10y ago
  By renaming the CSS file from `font-awesome.min.css` to `fa.min.css` they could save 660GB a day: 73,000,000 sites * 1000 visitors * 10 bytes / 1024^3
  - kasparsklavins 10y ago
    `fa` would basically be free for gzip because the icons use fa as a class name.
    - koliber 10y ago
      The savings are actually greater, because by modifying the filename, 660GB would be saved in both, the request and the response!
  - kalid 10y ago
    A calculator for you, because I'm in pitch-my-side-project mode ;) https://instacalc.com/50060 https://instacalc.com/50060
    - richfnelson 10y ago
      That's pretty neat idea. The site's missing a cute calculator favicon though, which destroyed my UX.
jessesuth81 10y ago
Wouldn't the most obvious solution be to open-source FA fonts and include them in Linux, Windows, Mac OS, iOS and Android? If they were installed on all systems then we wouldn't really have this issue at all. Given the ubiquity of some fonts this doesn't seem impossible. Or and sorry to say cause I like FA, screw them and see if Apple/MS/Google can have an open standard icon font that doesn't suck.
- groks 10y ago
  They're available under the OFA license. They're already shipped with Linux, eg. here: https://admin.fedoraproject.org/pkgdb/package/rpms/fontawesome-fonts/ https://admin.fedoraproject.org/pkgdb/package/rpms/fontaweso...
  - generj 10y ago
    Yeah, and with the TTF available, readily installable on Windows/Mac OS as well. I used FA in a PPT just the other day.
- Too 10y ago
  Doesn't have to be in the OS. Enough to bundle it with the browsers. Same goes for all major frameworks as well, just ship jquery, angular, bootstrap and react with the browser already, like a super long lived cache. If that's too steep for you, maybe a browser extension would be a good middle ground.
jessesuth81 10y ago
Wouldn't the most obvious solution be to open-source FA fonts and include them in Linux, Windows, Mac OS, iOS and Android? If they were installed on all systems then we wouldn't really have this issue at all. Given the ubiquity of some fonts this doesn't seem impossible. Or and sorry to say cause I like FA, screw them and see if Apple/MS/Google can have an open standard icon font that doesn't suck.
BillBatw2 10y ago
The font on this page is terrible. Bad legibility!
- angry-hacker 10y ago
  Out of interest, what is your platform? Looks decent here.
  - alphakappa 10y ago
    I don't think this is a platform-specific thing. It's an 'artsy' font that takes away from the reading experience. While it might be fine for graphic design, it certainly doesn't seem like one that's suited for big blocks of text.
BillBatw2 10y ago
The font on this page is terrible. Bad legibility!
meirelles 10y ago
That's a lot a bandwidth for a single thing. Makes me wonder, perhaps we should have a global repository of popular web libraries for browsers, all of them versioned, like happens on npm/bower. It's possible be backwards compatible with old browsers using a real and standardized URL. A single source of the truth. It's better than many CDNs providing the same thing over and over again... Being immutable packages browsers do not need check for updates (no more waste with 304 responses).
- keville 10y ago
  You're not the first to think this is a good idea. I can think of a few [1][2][3] examples just off the top of my head. [1] https://developers.google.com/speed/libraries/ https://developers.google.com/speed/libraries/ [2] https://www.jsdelivr.com https://www.jsdelivr.com [3] https://cdnjs.com https://cdnjs.com
parasitid 10y ago
Save Hexabytes a day by stopping this GIF everywhere mania!
fortawesome 10y ago
This is a great article. Some of these are already on the agenda for FA5, but there's some new stuff there for us too. We'll dig in and it's a TODO on the FA5 roadmap now. :) Another thing I'm super excited about is stray points in vectors. We found some new tools for Illustrator that make this a LOT easier and will have a very real impact on bandwidth as well. Super fun.
- fortawesome 10y ago
  (Oh and FA5 Pro CDN will allow loading just the icon categories you need. And for real granular control, FA5 Pro includes a desktop subsetter for all backers too.) Edit: Fixed wording for clarity.
- nthcolumn 10y ago
  I like and use font-awesome. Thanks and keep up the awesome work. Are there advantages to Wenting Zhang's [approach](http://cssicon.space http://cssicon.space)? Is there any way of lazy-loading - i.e. just accepting that some people - either through ignorance or laziness will load the entire set - and only use a couple of icons? Even if this were just some tool to craft the url it might get us on the road to that petabytes per day (really?).
- pixelambacht 10y ago
  Hey, glad you liked it! I tried to get in touch but I guess the message got lost in your noisy inboxes — must be a busy time for you folks. Ping me if there's anything I can help with!
che_shirecat 10y ago
Stuff like this is like rearranging chairs on the titanic - 26 kilobytes is a drop in the bucket compared to the bloat created by all the other shit people slap on to their sites - ad scripts for example
- codingdave 10y ago
  That is just a terrible analogy. Saving 20% of bandwidth, if you really want to make a accurate analogy to an event when 1500 people died, would be like saving the lives of 300 people. Saying "Screw it, More people died in other places" is missing the point. The article even admits this is not the #1 place to optimize... but that doesn't mean you should scoff at it.
- beart 10y ago
  Maybe, but at some point you need to clear those chairs out of the way if you want to get anyone to the boats.
- wnevets 10y ago
  so your argument why bother reducing bandwidth usage at all?
  - che_shirecat 10y ago
    no, just your HN-standard pessimistic observation on its efficacy =]
et1337 10y ago
People seem to be plugging font generator websites, so here's what I use and highly recommend: http://fontastic.me/ http://fontastic.me/
btbuildem 10y ago
Ironically, they use a somewhat unreadable font on their website.
jasoncchild 10y ago
Despite all the hand waiving about accuracy of the claims or the efficacy of CDN fronted caching, etc etc, it is good to see more initiatives around saving (especially mobile) bandwidth use. After moving from EE into full stack js I've been blown away as the duplication present
eriknstr 10y ago
The fork commits only the modified font files, so as soon as the upstream project modifies the font files it will be out of date. Might it not be better to script the optimization passes?
megous 10y ago
Save the internet by dropping icon fonts altogether. You save a lot of bandwidth, and you stop breaking the web.
cpeterso 10y ago
You can also serve the font files with the `Cache-Control: immutable` HTTP response header so the client never needs to revalidate with the server (even when the user forces a page reload). Use versioned filenames for immutable resources if you need to change them later. http://bitsup.blogspot.de/2016/05/cache-control-immutable.html http://bitsup.blogspot.de/2016/05/cache-control-immutable.ht...
epx 10y ago
I dropped web font after another HN post about how bw hogging they are. My site is not fashion anyway, and the mobile users are majority
Zelmor 10y ago
One of the quoted sources is titled >How Font Awesome 5 Became Kickstarter’s Most Funded Software Project I checked their kickstarter, however. >35,550 backers pledged $1,076,960 to help bring this project to life. Pillars of Eternity, most assuredly software, was a kickstarter I backed. Their campaign page reads to this day: >73,986 backers pledged $3,986,929 to help bring this project to life. Why make up such a shitty lie? Does it matter if you have the longest John in the pub? Is this something USA specific down the American Dream/Meritocracy/Competitiveness axis? I find most European projects to be more modest about these things. No hate please! None intended here. It just feels weird to me.
- ihuman 10y ago
  Kickstarter separates video games from software. They're #1 in that section when sorted by funding. https://www.kickstarter.com/discover/categories/technology/software?ref=discovery_overlay&sort=most_funded https://www.kickstarter.com/discover/categories/technology/s...
- spectre 10y ago
  The claim of being the most funded software project is down to Font Awesome being the most funded project in the Software category. https://www.kickstarter.com/discover/categories/technology/software?sort=most_funded https://www.kickstarter.com/discover/categories/technology/s... Pillars of Eternity is in the Video Games category and so isn't counted as Software.
- deleted 10y ago
  [deleted]
- deleted 10y ago
  [deleted]
Bahamut 10y ago
We are actually in the process of changing our Font Awesome font usage into svg versions of the font (via Icomoon's free converter tool) due to some of our customers blocking web fonts on IE11 via Windows Registry settings, claiming security issues... But one nice side-effect of changing it to svg versions is that our clients are now loading icons on demand and only the ones being used in the app, as opposed to the whole web font.
amelius 10y ago
Shouldn't we put resources like this on a CDN?

506 points by mattiemass 10y ago

I've been using https://icomoon.io/app/ https://icomoon.io/app/ for years now to pick only the fonts I like and it can also generate icon fonts from svg so that I can merge different icon sets and pick the only icons I will use in my projects.

puddintane 10y ago
This is definitely my go-to for slimming down huge icon packs. Font pack companies really shouldn't focus on that since there are so many tools that help developers do this as well.
balamaci 10y ago
Guess you don't care for the high probability that the user has already the CSS in local cache .

deleted 10y ago

[deleted]

sheeshkebab 10y ago

Awesome!

anonymish 10y ago

There are some really valid points in here and I dislike the idea of using the whole font when only a few icons are required. But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? I would think that does more harm than everyone grabbing a fully cached copy once from a cdn.

redbergy 10y ago
What an interesting thought. I wonder what the actual user base of a library would have to be before it would even itself out and then go over the threshold of where you would see a return. Certainly 74 million sites should do it if they were all using the same CDN but I have no idea how you would start to even try to calculate this.
wyldfire 10y ago
The distribution of icons used is probably not uniform, so it's not like a worst case scenario of all misses all the time. Just the less popular ones.
- icebraining 10y ago
  Even if you subset is the same as mine, if each of us is doing the subsetting ourselves, we won't share the same URL, hence the browser will still fetch it twice. On the other hand, it seems that FA themselves are building a CDN with subsetting, so they could in fact provide those shared subsets. Unfortunately (but understandably) it's paid, so most of us can't use it.
Klathmon 10y ago
It's one of those things that works "in a perfect world", but in the real world it just doesn't work out that well. For starters, leveraging caching via a common CDN pretty much requires everyone to be using a single version from a single CDN. If you can't agree on that, then every time a new version comes out the web is split and the caching doesn't work, and every time someone decides to use another CDN (or someone provides a new one) the group is split again. But then split that across all the fonts, formats, and compression schemes available and you'll see that the chance that a visitor has seen that font, at that version, from that CDN, using that compression scheme, in that format at any point in the past EVER is actually significantly smaller than you'd think. Which brings us into the next point. Even if you've seen it before, the chances that you'll have it cached is pretty small. Browser caches are suprisingly small in the grand scheme of things, and people tend to clear them more often than you think. Add in privacy browser mode and "PC cleaner" programs and the average person's caches lasts much shorter than at least I expected it to. But even worse are mobile caches. IIRC older android had something like a 4MB cache!!! And until very recently safari had something like a 50mb limit (and before that didn't cache ANYTHING to disk!). Now it's better, but you are still looking at a few hundred MB of cache. And with images getting bigger, big GIFs being common, huge amounts of AJAX requests happening all the time in most web pages, you'll find that the browser cache is completely cycled through on a scale of days or hours not weeks or months. IMO it's at the point where the "dream" of using a CDN and having a large percentage of your users already have the item in their cache isn't going to work out, and you are better off bundling stuff yourself and doing something like "dead code elimination" to get rid of anything you don't use. And that method only becomes more powerful when you start looking at custom caching and updating solutions. A few months ago I saw a library that was designed to only download a delta of an asset and store it in localstorage so updates to the application code only need to download what changed and not the whole thing again. Sadly I can't seem to find it again.
- Spooky23 10y ago
  These things highlight how the current system of font distribution is really suboptimal. Even CDN hits are metered, and the idea that I need to either load or cache a bunch of data to render text is dumb. My employer manages like $20k devices. I betcha we spend 5 figures annually on this crap.
koolba 10y ago
> But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? Disk is cheap. Particularly disks that you don't pay for like your users' disks.
- matt_kantor 10y ago
  It's not about disk, it's about network I/O. Making your resource "more unique" means more cache misses and more requests that need to be served (in theory anyway, see Klathmon's sibling comment[0] for more on this). [0]: https://news.ycombinator.com/item?id=13138826 https://news.ycombinator.com/item?id=13138826
  - koolba 10y ago
    Not being a fan of used shared CDNs for static resources[1], I don't see the issue here. They're going to have to download something anyway so from the perspective of your users it's still one download, just smaller. With proper unique namespacing (unique URL per version) and HTTP Cache-Control headers, they only have to download it once (assuming they don't clear their local cache). [1]: Combination of security reasons and unnecessarily coupling apps to the public internet.
yumraj 10y ago
Unfortunately it's the same with Bootstrap and other JS/CSS frameworks/libraries like that. You typically only use a small subset but it is non-trivial to carve out the much smaller set that you need. There is some tooling that claims to attempt at cleanup, but not sure how tested they are.
oliv__ 10y ago
Usually when I want to use under 10 icons, I just download an image of each with this handy tool: http://fa2png.io http://fa2png.io (not affiliated, just a user)

proaralyst 10y ago

What's the argument against icon fonts? Using actual SVGs?

anonymish 10y ago
Yes 100% put your icons in an include file of svg defs. There are a number of tools that will optimize svg files for size like svgo. Output straight from Illustrator, for example, has a lot room for improvement. I also usually end up hand-tweaking for things like removing the full style and doing that in my site's CSS. What I think is really still needed are more options besides Illustrator for generating svg content. Yes, Inkscape is overall ok but is lacking in setup ease and genera speed. There a number of programs that are so close to doing what is needed and then won't save or export an svg. Pixelmater, looking at you.
TheCoreh 10y ago
- Font rendering is very inconsistent across platforms, so your icons can look pretty bad (e.g. on Windows) - You're more likely to hit aligment/layout issues because you're using a tool designed for text to render pictures - The character codes used are textual information but have no semantic meaning (this can be addressed by using ligatures or characters in the private unicode range) - Adding more icons requires regenerating the font - Using a subset of icons requires regenerating the font - Font authoring is non-trivial and requires much more specialized tools and knowledge when compared to SVG - You need to ship the font in various formats (TTF, OTF, WOFF, WOFF2) - It's not easy to animate icons, or include colors or transparency - By now SVG support is sufficiently widespread, so the original rationale for using font icons no longer applies None of these, except maybe the rendering quality, are deal breakers. Workarounds and counterarguments do exist. And SVG does have some disadvantages too (e.g. parsing overhead, filesize, memory consumption) I personally side with using SVGs currently. As technology progresses, I might definitely reassess my view.
aerique 10y ago
Icon fonts have been breaking websites for people that do not allow websites to set their fonts.

allendoerfer 10y ago

The FOSS web community should participate in a global feature freeze and stop creating new libraries and frameworks for a year or two to work on stuff like this instead. Just so much opportunity everywhere.

mosburger 10y ago

If you're only using a small subset of FontAwesome (as I suspect many people do), I'd imagine at some point it'd make a lot of sense to use data-uri's to effectively embed them directly in an existing request, which would be faster than a CDN? I saw a talk by someone from Smashing Magazine where they basically did this for a subset of their WebFonts (downloading the entire font asynchronously afterward), then they cached their WebFonts in LocalStorage, but it seems like it make even more sense for an icon font where you're using a very small subset.

espadrine 10y ago
That is what I did for the shields.io logo: https://raw.githubusercontent.com/badges/shields/master/logo.svg https://raw.githubusercontent.com/badges/shields/master/logo... Unfortunately it is still a bit big. Simply converting it to SVG would probably be smaller. I'd welcome a simple tool that does that!
- mosburger 10y ago
  Yeah, it seems like a tool like that wouldn't be hard to build... hmm... :)
  - vincent91 10y ago
    Inkscape can convert fonts inside an SVG to paths.
- nathan-wall 10y ago
  I've been converting each font awesome image I need to SVG by hand. It's actually really easy. 1. Open fontawesome-webfont.svg in a text editor. 2. Find the glyph you want to use. 3. Copy it into a new file. 4. Add boilerplate[1] to new file. 5. Change the <glyph> tag to a <path> tag. 6. Add the attribute `transform="scale(0.1,-0.1) translate(0,-1536)"` 7. Open the file in Chrome and see your SVG. [1] boilerplate: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> {glyph goes here} </svg> [Example] Starting with the following glyph: <glyph glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> We end with: <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2"> <path transform="scale(0.1,-0.1) translate(0,-1536)" glyph-name="home" unicode="" horiz-adv-x="1664" d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" /> </svg> The `unicode` and `glyph-name` attributes can be removed.

jstapels 10y ago

Unfortunately I think a lot of the points in this article are lost if you assume that the CDN's serving up the TTF for FontAwesome are using GZIP compression.

chrisan 10y ago
I was curious and checked out FA's CDN https://use.fontawesome.com/releases/v4.7.0/fonts/FontAwesome.otf https://use.fontawesome.com/releases/v4.7.0/fonts/FontAwesom... and the rest of the fonts as https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.* https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesom... (not sure why they name the OTF differently) otf 110KB eot 102KB svg 157KB ttf 102KB woff 96.1KB woff2 75.8KB All appear to be using gzip in headers
- hmottestad 10y ago
  On my machine, the otf version uses much less bandwidth. From 52.4 kb to 16.4.
  - chrisan 10y ago
    I'm getting the same results in Chrome using mac, win10, or ubuntu. Are you using the same URLs I posted?
    - hmottestad 10y ago
      http://imgur.com/a/acTMh http://imgur.com/a/acTMh
      - chrisan 10y ago
        Well I'm stumped. Would love to know how we are getting different results, and how your results (16KB) are _so_ much better than mine (110KB) Here is a codepen if someone else wants to try OTF results http://codepen.io/anon/pen/gLjLMv http://codepen.io/anon/pen/gLjLMv

dmtroyer 10y ago

Seems like they could now afford to have the author consult on the project.

jordanielewski 10y ago

I used http://fontello.com/ http://fontello.com/ when I needed few icons

meirelles 10y ago
The fontello is awesome. It's possible add custom svg too.

jsnell 10y ago

Is the 2000TB/day number reasonable, or just clickbait? It's all based on coming up with two numbers that when multiplied say that this resource is downloaded 73 billion times a day. That's 20 times / day for every internet user (even those using it on a 2G connection once a year). Given a reasonable caching period of 1 month, that'd mean the average user visits 600 different sites a month. That seems like much more than one would expect. Or to look at it another way, global IP traffic is apparently estimated at 72000 PB/month. That's 2400PB/day. This font alone would then be accounting for 0.3% of all internet traffic, or 1% of all non-video traffic. Again, that's a very high number. But at least it doesn't appear to be a totally impossible number either, just an awfully implausible one.

koliber 10y ago
By renaming the CSS file from `font-awesome.min.css` to `fa.min.css` they could save 660GB a day: 73,000,000 sites * 1000 visitors * 10 bytes / 1024^3
- kasparsklavins 10y ago
  `fa` would basically be free for gzip because the icons use fa as a class name.
  - koliber 10y ago
    The savings are actually greater, because by modifying the filename, 660GB would be saved in both, the request and the response!
- kalid 10y ago
  A calculator for you, because I'm in pitch-my-side-project mode ;) https://instacalc.com/50060 https://instacalc.com/50060
  - richfnelson 10y ago
    That's pretty neat idea. The site's missing a cute calculator favicon though, which destroyed my UX.

jessesuth81 10y ago

Wouldn't the most obvious solution be to open-source FA fonts and include them in Linux, Windows, Mac OS, iOS and Android? If they were installed on all systems then we wouldn't really have this issue at all. Given the ubiquity of some fonts this doesn't seem impossible. Or and sorry to say cause I like FA, screw them and see if Apple/MS/Google can have an open standard icon font that doesn't suck.

groks 10y ago
They're available under the OFA license. They're already shipped with Linux, eg. here: https://admin.fedoraproject.org/pkgdb/package/rpms/fontawesome-fonts/ https://admin.fedoraproject.org/pkgdb/package/rpms/fontaweso...
- generj 10y ago
  Yeah, and with the TTF available, readily installable on Windows/Mac OS as well. I used FA in a PPT just the other day.
Too 10y ago
Doesn't have to be in the OS. Enough to bundle it with the browsers. Same goes for all major frameworks as well, just ship jquery, angular, bootstrap and react with the browser already, like a super long lived cache. If that's too steep for you, maybe a browser extension would be a good middle ground.

jessesuth81 10y ago

BillBatw2 10y ago

The font on this page is terrible. Bad legibility!

angry-hacker 10y ago
Out of interest, what is your platform? Looks decent here.
- alphakappa 10y ago
  I don't think this is a platform-specific thing. It's an 'artsy' font that takes away from the reading experience. While it might be fine for graphic design, it certainly doesn't seem like one that's suited for big blocks of text.

BillBatw2 10y ago

The font on this page is terrible. Bad legibility!

meirelles 10y ago

That's a lot a bandwidth for a single thing. Makes me wonder, perhaps we should have a global repository of popular web libraries for browsers, all of them versioned, like happens on npm/bower. It's possible be backwards compatible with old browsers using a real and standardized URL. A single source of the truth. It's better than many CDNs providing the same thing over and over again... Being immutable packages browsers do not need check for updates (no more waste with 304 responses).

keville 10y ago
You're not the first to think this is a good idea. I can think of a few [1][2][3] examples just off the top of my head. [1] https://developers.google.com/speed/libraries/ https://developers.google.com/speed/libraries/ [2] https://www.jsdelivr.com https://www.jsdelivr.com [3] https://cdnjs.com https://cdnjs.com

parasitid 10y ago

Save Hexabytes a day by stopping this GIF everywhere mania!

fortawesome 10y ago

This is a great article. Some of these are already on the agenda for FA5, but there's some new stuff there for us too. We'll dig in and it's a TODO on the FA5 roadmap now. :) Another thing I'm super excited about is stray points in vectors. We found some new tools for Illustrator that make this a LOT easier and will have a very real impact on bandwidth as well. Super fun.

fortawesome 10y ago
(Oh and FA5 Pro CDN will allow loading just the icon categories you need. And for real granular control, FA5 Pro includes a desktop subsetter for all backers too.) Edit: Fixed wording for clarity.
nthcolumn 10y ago
I like and use font-awesome. Thanks and keep up the awesome work. Are there advantages to Wenting Zhang's [approach](http://cssicon.space http://cssicon.space)? Is there any way of lazy-loading - i.e. just accepting that some people - either through ignorance or laziness will load the entire set - and only use a couple of icons? Even if this were just some tool to craft the url it might get us on the road to that petabytes per day (really?).
pixelambacht 10y ago
Hey, glad you liked it! I tried to get in touch but I guess the message got lost in your noisy inboxes — must be a busy time for you folks. Ping me if there's anything I can help with!

che_shirecat 10y ago

Stuff like this is like rearranging chairs on the titanic - 26 kilobytes is a drop in the bucket compared to the bloat created by all the other shit people slap on to their sites - ad scripts for example

codingdave 10y ago
That is just a terrible analogy. Saving 20% of bandwidth, if you really want to make a accurate analogy to an event when 1500 people died, would be like saving the lives of 300 people. Saying "Screw it, More people died in other places" is missing the point. The article even admits this is not the #1 place to optimize... but that doesn't mean you should scoff at it.
beart 10y ago
Maybe, but at some point you need to clear those chairs out of the way if you want to get anyone to the boats.
wnevets 10y ago
so your argument why bother reducing bandwidth usage at all?
- che_shirecat 10y ago
  no, just your HN-standard pessimistic observation on its efficacy =]

et1337 10y ago

People seem to be plugging font generator websites, so here's what I use and highly recommend: http://fontastic.me/ http://fontastic.me/

btbuildem 10y ago

Ironically, they use a somewhat unreadable font on their website.

jasoncchild 10y ago

Despite all the hand waiving about accuracy of the claims or the efficacy of CDN fronted caching, etc etc, it is good to see more initiatives around saving (especially mobile) bandwidth use. After moving from EE into full stack js I've been blown away as the duplication present

eriknstr 10y ago

The fork commits only the modified font files, so as soon as the upstream project modifies the font files it will be out of date. Might it not be better to script the optimization passes?

megous 10y ago

Save the internet by dropping icon fonts altogether. You save a lot of bandwidth, and you stop breaking the web.

cpeterso 10y ago

You can also serve the font files with the `Cache-Control: immutable` HTTP response header so the client never needs to revalidate with the server (even when the user forces a page reload). Use versioned filenames for immutable resources if you need to change them later. http://bitsup.blogspot.de/2016/05/cache-control-immutable.html http://bitsup.blogspot.de/2016/05/cache-control-immutable.ht...

epx 10y ago

I dropped web font after another HN post about how bw hogging they are. My site is not fashion anyway, and the mobile users are majority

Zelmor 10y ago

One of the quoted sources is titled >How Font Awesome 5 Became Kickstarter’s Most Funded Software Project I checked their kickstarter, however. >35,550 backers pledged $1,076,960 to help bring this project to life. Pillars of Eternity, most assuredly software, was a kickstarter I backed. Their campaign page reads to this day: >73,986 backers pledged $3,986,929 to help bring this project to life. Why make up such a shitty lie? Does it matter if you have the longest John in the pub? Is this something USA specific down the American Dream/Meritocracy/Competitiveness axis? I find most European projects to be more modest about these things. No hate please! None intended here. It just feels weird to me.

ihuman 10y ago
Kickstarter separates video games from software. They're #1 in that section when sorted by funding. https://www.kickstarter.com/discover/categories/technology/software?ref=discovery_overlay&sort=most_funded https://www.kickstarter.com/discover/categories/technology/s...
spectre 10y ago
The claim of being the most funded software project is down to Font Awesome being the most funded project in the Software category. https://www.kickstarter.com/discover/categories/technology/software?sort=most_funded https://www.kickstarter.com/discover/categories/technology/s... Pillars of Eternity is in the Video Games category and so isn't counted as Software.
deleted 10y ago
[deleted]
deleted 10y ago
[deleted]

Bahamut 10y ago

We are actually in the process of changing our Font Awesome font usage into svg versions of the font (via Icomoon's free converter tool) due to some of our customers blocking web fonts on IE11 via Windows Registry settings, claiming security issues... But one nice side-effect of changing it to svg versions is that our clients are now loading icons on demand and only the ones being used in the app, as opposed to the whole web font.

amelius 10y ago

Shouldn't we put resources like this on a CDN?