
Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts - mattiemass
https://pixelambacht.nl/2016/font-awesome-fixed/
======
jsnell
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
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

~~~
kalid
A calculator for you, because I'm in pitch-my-side-project mode ;)

[https://instacalc.com/50060](https://instacalc.com/50060)

~~~
timlyo
On A serious note about the UI though, that red/green colour is awful for
colourblind people. Didn't even realise there were two colours at first.

~~~
kalid
Thanks for the feedback. The colors are more syntax highlighting (vs
indicating anything important), I'd like to research best practices here. I
wonder if there's any client-side settings I can detect to indicate a
different stylesheet should load.

~~~
rickycook
blue is a good option instead of green. same reason some places in the world
have blue, rather than green signals for traffic lights afaik :)

------
fortawesome
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
(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.

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

~~~
Klathmon
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.

~~~
nandhp
> 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.

All this common web stuff that is distributed by several CDNs (as well as
separately by individuals) really suggests to me that there should some
browser feature like `<script src="jquery.min.js"
sha256="85556761a8800d14ced8fcd41a6b8b26bf012d44a318866c0d81a62092efd9bf" />`
that would allow the browser to treat copies of the file from different CDNs
as the same. (This would nicely eliminate most of the privacy concerns with
third-party jQuery CDNs as well.)

~~~
Klathmon
Because anything that can cross domains instantly allows anyone to probe your
browser to see what is in your cache.

So to take it to a bit of a rediculous (but still possible) point, I could
probably guess what your HN user-page looks like to you. So from there I could
serve that in an AJAX request to all my visitors with this content-based hash
and if I get a hit from someone, I can be pretty damn sure it's you.

And that only really solves one or 2 of those issues. The versioning,
compression schemes, formats, number of fonts, and sizes of browser caches
will still cause this system's cache to be a revolving door, just slightly
more effective.

And as for the security concerns of using a CDN. Subresource-integrity (which
someone else here linked already) allows you (you being the person adding the
<script> tag to your site) to say what the hash of the file you expect is, and
browsers won't execute it if it doesn't match. So that lets you include 3rd
party resources without fear that they will be tampered with.

~~~
fryguy
Ideally this would be used with a sort of `Cache-Global: true` header in HTTP,
and then you would only be able to grab things that are intended to be cached
like this. It would do nothing to stop super-cookies with this method though.

------
mosburger
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
That is what I did for the shields.io logo:
[https://raw.githubusercontent.com/badges/shields/master/logo...](https://raw.githubusercontent.com/badges/shields/master/logo.svg)

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!

~~~
olegkikin
Here, reduced it from 8832 bytes down to 4710

[http://olegkikin.com/badge2_cleaned.svg](http://olegkikin.com/badge2_cleaned.svg)

And it GZips better as well (4793 -> 2120).

I opened it in Inkscape, converted the text to path. Then ran it through
SVGCleaner.

You can also do manual simplification in Inkscape (Ctrl + L) till the quality
starts to degrade. This lets you reduce things even further:

[http://olegkikin.com/badge3_cleaned.svg](http://olegkikin.com/badge3_cleaned.svg)

3516 bytes, 1726 GZipped.

~~~
espadrine
Nice! Can I use it?

(If you want, you can also submit a patch in
[https://github.com/badges/shields.](https://github.com/badges/shields.))

~~~
olegkikin
Yeah, it's your artwork, I just optimized it.

------
jessesuth81
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
They're available under the OFA license. They're already shipped with Linux,
eg. here:

[https://admin.fedoraproject.org/pkgdb/package/rpms/fontaweso...](https://admin.fedoraproject.org/pkgdb/package/rpms/fontawesome-
fonts/)

~~~
generj
Yeah, and with the TTF available, readily installable on Windows/Mac OS as
well. I used FA in a PPT just the other day.

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

------
meirelles
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
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)

------
jordanielewski
I used [http://fontello.com/](http://fontello.com/) when I needed few icons

~~~
meirelles
The fontello is awesome. It's possible add custom svg too.

------
jstapels
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
I was curious and checked out FA's CDN
[https://use.fontawesome.com/releases/v4.7.0/fonts/FontAwesom...](https://use.fontawesome.com/releases/v4.7.0/fonts/FontAwesome.otf)
and the rest of the fonts as
[https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesom...](https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-
webfont.*) (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
On my machine, the otf version uses much less bandwidth. From 52.4 kb to 16.4.

~~~
chrisan
I'm getting the same results in Chrome using mac, win10, or ubuntu.

Are you using the same URLs I posted?

~~~
hmottestad
[http://imgur.com/a/acTMh](http://imgur.com/a/acTMh)

~~~
chrisan
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)

~~~
eriknstr
Opening the link you provided above with Firefox and bringing up network
motior, I get the same as you; 109.18 KB "transferred", 131.65 KB "size", and
gzip was used according to headers. I thought that maybe "transferred" might
be the size of the data _after decompression_ , and "size" would be
"transferred" plus headers, but then I checked Chromium and I see 110 KB there
as well.

It seems very strange that the size reported by the parent is varying. Why
would it do that? Are they all the same file or different ones?

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

~~~
aerique
Icon fonts have been breaking websites for people that do not allow websites
to set their fonts.

~~~
IgorPartola
Are those the same people that disable JavaScript everywhere too? Imagine that
you were running desktop apps and said "ok I want this program, but I only
want it to use standard widgets, my chosen font, and not use certain API's.
Wait why does this look funny and not work right?!"

~~~
jlarocco
Actually not. I allow Javascript but I block web fonts because I think they're
a stupid idea.

Your argument about desktop apps isn't very good because people can (and do)
prevent desktop apps from doing certain things and accessing various stuff,
like web cams, the microphone, system directories, the internet, etc. If my
text editor breaks because it can't access my webcam, I'd say it's a serious
problem.

~~~
aclsid
Just curious, how do you actually block desktop apps from doing such things,
aside from unplugging the device in question that is?

------
che_shirecat
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

~~~
wnevets
so your argument why bother reducing bandwidth usage at all?

~~~
che_shirecat
no, just your HN-standard pessimistic observation on its efficacy =]

------
BillBatw2
The font on this page is terrible. Bad legibility!

~~~
angry-hacker
Out of interest, what is your platform? Looks decent here.

~~~
alphakappa
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.

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

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

~~~
spectre
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/s...](https://www.kickstarter.com/discover/categories/technology/software?sort=most_funded)

Pillars of Eternity is in the Video Games category and so isn't counted as
Software.

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

------
eriknstr
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?

------
cpeterso
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.ht...](http://bitsup.blogspot.de/2016/05/cache-control-
immutable.html)

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

------
jasoncchild
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

------
epx
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

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

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

------
parasitid
Save Hexabytes a day by stopping this GIF everywhere mania!

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

------
sheeshkebab
Awesome!

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

